jQuery 可以很方便的使用 addClass 和 removeClass 这两个方法来添加和删除元素的 class，而且基本不会遇到兼容性问题。原生的 JavaScript 操作 class 就会麻烦一些。我开发博客主题使用 classList 操作 class 的时候正好遇到了一些兼容性问题，这里就来简单写一下 classList 的使用和兼容 IE 的方法。

classList

classList 是 HTML5 中新增的一个操作 class 的对象。

add 添加

下面给一个按钮添加 class：

var btn = document.querySelector('button');  //  选择按钮元素
btn.classList.add('active');  //  添加 class

上面给按钮添加了一个 active 的 class。

remove 移除

下面移除一个按钮的 class：

var btn = document.querySelector('button');  //  选择按钮元素
btn.classList.remove('active');  //  移除 class

上面移除了 active 的 class。

replace 替换

下面把按钮的 class 从 btn 替换为 active：

var btn = document.querySelector('button');  //  选择按钮元素
btn.classList.replace('btn', 'active');  //  替换 class

item 通过索引获取 class

下面是一个简单的 HTML：

<button type="button" class="btn active">按钮</button>

这个按钮包含两个 class，分别是 btn 和 active。

下面通过数字索引的方式获取 class：

var btn = document.querySelector('button');  //  选择按钮元素
//  下面获取 class 并在控制台输出
console.log(btn.classList.item(0));  //  输出 btn
console.log(btn.classList.item(1));  //  输出 active

forEach 获取所有 class

还是上面的 HTML，下面通过 forEach 获取所有 class：

var btn = document.querySelector('button');  //  选择按钮元素
btn.classList.forEach(function(val, key) {
  console.log(val);  //  在控制台输出 class
  console.log(key);  //  在控制台输出 class 索引编号
});

控制台输出如下：

btn
0
active
1

除了上面写的方法外 classList 也支持 length 属性，可以获取 class 的数量。

classList 虽然方便但 IE 支持的不是太好，即便是最高版本的 IE11 也还有一些方法不兼容。如果不需要兼容 IE 的话可以直接通过 classList 来操作元素的 class，如果要兼容 IE 的话可以继续往下看。

兼容 IE

如果需要兼容老 IE 的话就不能使用 classList 了。

添加 class

下面给 button 添加一个 active 的 class：

var btn = document.querySelector('button');  //  选择按钮元素
var btnClass = btn.className;  //  获取 class
if (btnClass === '') {
  btn.className = 'active';  //  直接设置 class
} else {
  btn.className = btnClass + ' active'; //  设置 class 为原来的 class + 空格 + 新 class
}

简单说明：

  1. 通过 className 获取 class。
  2. 判断获取的 class 是否为空字符。
  3. 如果是空字符就直接通过 className 设置 class，否则就使用原来的 class + 空格 + 新 class。

删除 class

下面删除 button 中的 active class：

var btn = document.querySelector('button');  //  选择按钮元素
var btnClass = btn.className.split(' ');  //  获取 class 然后用空格把 class 拆分为数组
btnClass.splice(btnClass.indexOf('active'), 1);  //  获取指定元素的位置然后删除
btn.className = btnClass.join(' ');  //  用空格分隔把数组转为字符串然后设置 class

详细说明：

  1. 使用 className 获取 class。
  2. 使用 split 用空格为分隔符把获取的 class 拆分为数组。
  3. 使用 indexOf 查找 class 的位置。
  4. 使用 splice 删除元素，其中元素位置就是上面 indexOf 获取的位置。
  5. 使用 join 用空格为分隔符把数组合并为字符串。
  6. 使用 className 设置 class。

替换 class

下面是一个 HTML 按钮：

<button type="button" class="btn active d-inline-block">按钮</button>

下面要把 d-inline-block 替换为 d-none ：

var btn = document.querySelector('button');  // 获取元素
var btnClass = btn.className.split(' ');  // 把获取的 class 用空格拆分为数组
btnClass[btnClass.indexOf('d-inline-block')] = 'd-none';  // 查找并重新赋值
btn.className = btnClass.join(' ');  // 用空格分隔把数组转为字符串设置 class

替换和上面的删除差不多，只不过把删除改为了重新赋值。

除了转数组外也可以通过 replace 方法直接替换，不过相似的字符可能也会被替换。

简单封装

下面简单改进一下上面写的兼容 IE 的操作 class 的方法，然后封装为一个对象：

var classOperating = {
  add: function(el, newClass) {
    var elClass = el.className;
    if (elClass === '') {
      el.className = newClass;
    }else {
      el.className = elClass + ' ' + newClass;
    }
  },
  remove: function(el, removeClass) {
    var elClass = el.className;
    if (elClass === '') {
      return false;
    }
    elClass = elClass.split(' ');
    var classIndex = elClass.indexOf(removeClass);
    if (classIndex < 0) {
      return false;
    }
    elClass.splice(classIndex, 1);
    if (elClass.length) {
      el.className = elClass.join(' ');
    }else {
      el.className = '';
    }
  },
  replace: function(el, searchClass, newClass) {
    var elClass = el.className;
    if (elClass === '') {
      return false;
    }
    elClass = elClass.split(' ');
    var classIndex = elClass.indexOf(searchClass);
    if (classIndex < 0) {
      return false;
    }
    elClass[classIndex] = newClass;
    el.className = elClass.join(' ');
  }
};

调用：

var btn = document.querySelector('button');  // 用来操作的按钮元素
classOperating.add(btn, 'active');  // 添加一个 active 的 class
classOperating.remove(btn, 'active');  // 删除 active 的 class
classOperating.replace(btn, 'd-inline-block', 'd-none');  // 把 d-inline-block 替换为 d-none

注意！我上面演示用的 querySelector 选择器最低只能兼容到 IE8，如果需要兼容更老的 IE 可以把选择器换为 getElementById 或 getElementsByTagName 。

兼容 IE 如果想省事的话也可以直接使用 jQuery。

相关文章：