classList

从 className 到 classList,这是一次关于类名的变革,让我们看看强大的 classList

浏览器兼容的情况

image.png

一张图清晰明了,同时检测也很简单,document.body.classList 不是 undefined 就是支持的。

classList 有什么

我们来看一看在 classList 里有些什么。

image.png

我们可以看到里面有几个属性,我们来解释一下。

  1. value: 是 class 里的所有值
  2. length: 这是表示有多少的 class 值
  3. 类数组键值对: 这是每一个 class 值的键值对    我们接下来看一看暴露出来的 API。
const list = document.getElementById('wrapper').classList;
list.add('add1'); //  这是添加类的方法
list.contains('add1'); //  这是判断类中是否有这个类名
list.item(0); // 通过索引返回类名
list.remove('add1'); //  移除类
list.toString(); //  这个方法类似className
list.keys(); //  这个返回的是一个iterator接口,和Object.keys()一样可以用来遍历
list.toggle(); //  如果有这个类名就移除,没有就添加
1
2
3
4
5
6
7
8
Last Updated: 8/20/2019, 3:36:58 AM