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

 這兒提示一下，其他類型值轉換成布爾值的對應關系，對應關系表如下所示：

其他類型值	轉換成的布爾值
undefined	false
null	false
布爾值	不用轉換
數字	0，NaN轉化成false，其他數字類型轉換成true
字符串	只有空字符串''轉換成false，其他都轉換成true
對象	全部轉換為true

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

《JS基礎篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用》

《JS基礎篇--JS中的可枚舉屬性與不可枚舉屬性以及擴展 》