JS基礎篇–HTML DOM classList 屬性

頁面DOM裡的每個節點上都有一個classList物件，程式設計師可以使用裡面的方法新增、刪除、修改節點上的CSS類。使用classList，程式設計師還可以用它來判斷某個節點是否被賦予了某個CSS類。

新增類（add）

document.getElementById("myDIV").classList.add("mystyle");

為 <div> 元素新增多個類:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

移除類(remove)

使用remove方法，你可以刪除單個CSS類：

document.getElementById("myDIV").classList.remove("mystyle");

移除多個類：

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

切換類(toggle)

這個方法的作用就是，當myDiv元素上沒有這個CSS類時，它就新增這個CSS類；如果myDiv元素已經有了這個CSS類，它就是刪除它。就是反轉操作。

document.getElementById("myDIV").classList.toggle("newClassName");
myDiv.classList.toggle('myCssClass'); //現在是增加
myDiv.classList.toggle('myCssClass'); //現在是刪除

是否存在類（contains）

檢查是否含有某個CSS類:

var x = document.getElementById("myDIV").classList.contains("mystyle");

結果是true或者false。

length屬性

返回類列表中類的數量。
檢視 <div> 元素有多少個類名:

var x = document.getElementById("myDIV").classList.length; //3

獲取獲取 <div> 元素的所有類名:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;

item(index)

返回類名在元素中的索引值。索引值從 0 開始。如果索引值在區間範圍外則返回 null
獲取 <div> 元素的第一個類名（索引為0）:

var x = document.getElementById("myDIV").classList.item(0); //mystyle

瀏覽器支援

但是IE9和IE9以前的版本不支援該屬性，下面這個程式碼可以彌補這個遺憾：（來自網友程式碼）

if (!("classList" in document.documentElement)) {  
Object.defineProperty(HTMLElement.prototype, 'classList', {  
get: function() {  
var self = this;  
function update(fn) {  
return function(value) {  
var classes = self.className.split(/\s /g),  
index = classes.indexOf(value);  
fn(classes, index, value);  
self.className = classes.join(" ");  
}  
}  
return {                      
add: update(function(classes, index, value) {  
if (!~index) classes.push(value);  
}),  
remove: update(function(classes, index) {  
if (~index) classes.splice(index, 1);  
}),  
toggle: update(function(classes, index, value) {  
if (~index)  
classes.splice(index, 1);  
else  
classes.push(value);  
}),  
contains: function(value) {  
return !!~self.className.split(/\s /g).indexOf(value);  
},  
item: function(i) {  
return self.className.split(/\s /g)[i] || null;  
}  
};  
}  
});  
} 

這兒提示一下，其他型別值轉換成布林值的對應關係，對應關係表如下所示：

想要了解Object.defineProperty可以參考如下兩篇文章：

《JS基礎篇–JS apply的巧妙用法以及擴充套件到Object.defineProperty的使用》

《JS基礎篇–JS中的可列舉屬性與不可列舉屬性以及擴充套件》