首页 > 代码库 > 获取类名相关

获取类名相关

  JS中获取DOM节点的类有3种方法:

1、classList

  H5的方法,仅兼容IE10+,配套带有remove等api

2、getAttribute(‘class‘)

  据说在低版本IE有兼容问题,建议用方法3

3、className

  这个方法万能

  

  其实要讲的是看到vue源码里面的一个方法,兼容IE9一个对类进行操作的方法。

  记下来以后用。

// DOM节点与要删除的类
function removeClass(el, cls){
  // 这里已经对cls调用了trim()方法
  if(!cls || !cls = cls.trim()){
    return ;
  }
  // classList兼容IE10+
  // 如果支持 直接按空格分割字符串并调用remove方法删除类
  if(el.classList){
    if(cls.indexOf(‘ ‘) > -1){
      cls.split(/\s+/).forEach(function(c){ return el.classList.remove(c); });
    } else{
      el.classList.remove(cls);
    }
  } 
  // 对IE10以下做兼容 不知道为啥不用className
  else{
    // 修正类集合字符串 两边加空白
    // ‘a b‘ => ‘ a b ‘
    var cur = ‘ ‘ + (el.getAttribute(‘class‘) || ‘‘) + ‘ ‘;
    // 修正目标类 ‘a‘ => ‘ a ‘
    var tar = ‘ ‘ + cls + ‘ ‘;
    // 进行替换 ‘ a b ‘ => ‘ b ‘
    while(cur.indexOf(tar) >= 0){
      cur = cur.replace(tar, ‘ ‘);
    }
    // 再调用trim()操作 ‘ b ‘ => ‘b‘
    el.setAttribute(‘class‘, cur.trim());
  }
}

 

获取类名相关