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/