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) : 返回布尔值，检查元素的类属性中是否存在指定的类值

浏览器兼容性 :

浏览器兼容性.png

实例 ：

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

效果图.png

该文章同步在 :
CSDN Blog： http://blog.csdn.net/levinhax/article/details/76668475
GitHub Page : https://levinhax.github.io/