获取类名相关

Posted 2020-09-13 QH-Jimmy

　　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());
  }
}