javascript進階程式設計---classList屬性

javascript進階程式設計---classList屬性

1、傳統方法：

在操作類名的時候，需要通過className屬性添加、刪除和替換類名。如下面例子：

...

這個div中一共有三個類名，要從中刪掉一個類名，需要把這三個類分別拆開，然後進行處理，處理過程如下：

 <script type="text/javascript">        var className=div.className.split(/\s+/);        //找到要刪掉的類名        var pos=-1,            i,len;        for (var i = 0; i < className.length; i++) {            if(className[i]=="user"){               pos=i;               break;            }        };        className.splice(i,1);        div.className=className.join(" ");//將餘下的類名重新拼裝    </script>

上述方面即為傳統的方法。

2、html5新增方法classList(),可以完全擺脫className屬性。

具體使用案例如下：

    classList Example        Hello world!                    
This demo works in Firefox 3.6 and Chrome 8.
        <script type="text/javascript">        function addClass(){            var myDiv = document.getElementById("myDiv");            myDiv.classList.add("highlight");        }            function removeClass(){            var myDiv = document.getElementById("myDiv");            myDiv.classList.remove("highlight");        }            function toggleClass(){            var myDiv = document.getElementById("myDiv");            myDiv.classList.toggle("highlight");        }            function containsClass(){            var myDiv = document.getElementById("myDiv");            alert(myDiv.classList.contains("highlight"));        }        </script>    

註：但是目前classList屬性只有FireFox3.6+和Chrome支援。