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