設置 class 屬性與獲取 class 屬性方式類似，都是通過 Element 對象提供的 className 屬性和 classList 屬性實現。 ## Element 對象的 className 屬性 Element 對象提供的 className 屬性既可以實現獲取，也可以實現設置。其設置的語法結構如下: ```javascript elementNodeReference.className = cName; ``` 上述語法結構中，作為值的 cName 是一個字符串變量。表示當前元素的class屬性的值，可以是由空格分隔的多個class屬性值。 我們可以通過以下示例代碼，學習如何通過 className 屬性設置: ```javascript var btn = document.getElementById('btn'); var className = btn.className; className += ' animate'; btn.className = className; ``` ## Element 對象的 classList 屬性 Element 對象提供的 classList 屬性與 className 屬性類似，既可以實現獲取，也可以實現設置。 但 classList 屬性自身是只讀屬性，換句話講，我們并不能通過 classList 屬性進行設置。而是通過以下方法實現: | 方法名稱 | 描述 | | --- | --- | | add() | 添加指定的類值。如果這些類已經存在于元素的屬性中，那么它們將被忽略。| | remove() | 刪除指定的類值。| | item() | 按集合中的索引返回類值。| | toggle() | 切換指定的類值。 | | contains() | 檢查元素的類屬性中是否存在指定的類值。| 我們可以通過以下示例代碼，學習上述方法的使用: ```javascript var btn = document.getElementById('btn'); var classList = btn.classList; // 添加 .animate 樣式 classList.add('animate'); // 刪除 .animate 樣式 classList.remove('animate'); // 如果 .animate 存在，則刪除；如果 .animate 不存在，則添加 classList.toggle('animate'); // 判斷是否存在 .animate 樣式 console.log(classList.contains('animate')); ```