Element.classList属性

Element.classList是一个只读属性，它返回元素的类名，作为DOMTokenList对象，该元素用于在元素中添加，移除及切换CSS类。

对于jQuery里的hasClass、addClass、removeClass方法我们再熟悉不过了，但我们并不是在每个项目中都会去使用jQuery。在原生js中，classList可以方便的对元素的类名进行增删改查，它的构造器是DOMTokenList，提供了以下API供使用，包括length属性，item，contains，add，remove和toggle方法。

成员介绍 :

属性 :

length : 只读属性，返回一个整数，表示类列表中类的数量

方法 ：

add( String [, String] ) ： 添加指定的类，如果该类已存在，则会被忽略

remove( String [,String] ) ： 删除指定的类，其中移除一个不存在的类，不会报错

toggle ( String [, true | false] ) ： 当只有一个参数时，切换类名；当存在第二个参数时：如果为true，则添加指定的类值，如果为false，则删除它

item(number) : 按集合中的索引返回类值,索引值从0开始，索引值在区间外则返回null

contains(String) : 返回布尔值，检查元素的类属性中是否存在指定的类值

浏览器兼容性 :

实例 ：

<div id="root">
这是一段文字
</div>

#root{
width: 400px;
height: 50px;
text-align: center;
padding: 15px;
border: 1px solid #000;
}
.firstClass{
color : red;
}
.secondClass{
background-color: blue;
}

window.onload = function(){
document.getElementById("root").classList.add("firstClass","secondClass");
}

该文章同步在 :

简书 ： https://www.jianshu.com/users/63adfe13324c/timeline

GitHub Page : https://levinhax.github.io/