HTML DOM classList 屬性

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

新增類別（add）

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

為

元素新增多個類別:

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

移除類別(remove)

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

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

使用多個類別：

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

切換類(toggle)

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

document.getElementById("myp").classList.toggle("newClassName");

myp.classList.toggle('myCssClass'); //现在是增加
myp.classList.toggle('myCssClass'); //现在是删除

是否存在類別（contains）

檢查是否含有某個CSS類:

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

結果是true或false。

length屬性

傳回類別清單中類別的數量。
查看

元素有多少個類別名稱:

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

取得取得

元素的所有類別名稱:

<p id="myp" class="mystyle anotherClass thirdClass">I am a p element</p>

var x = document.getElementById("myp").classList;

item(index)

傳回類別名稱在元素中的索引值。索引值從 0 開始。如果索引值在區間範圍外則傳回null
取得

元素的第一個類別名稱（索引為0）:

var x = document.getElementById("myp").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;  
                    }  
                };  
            }  
        });  
    }

更多HTML DOM classList 屬性相關文章請關注PHP中文網！