HTML5 DOM元素类名相关操作API classList简介

1、传统方法：

在操作类名的时候，需要通过className属性添加、删除和替换类名。如下面例子：

<div class="bd user disabled">...</div>

这个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属性。

具体使用案例如下：

<title>classList Example</title><style>    .highlight {        background: yellow;    }</style>  <div id="myDiv" class="init">Hello world!</div><input type="button" value="Add class" onclick="addClass()"><input type="button" value="Remove class" onclick="removeClass()"><input type="button" value="Toggle class" onclick="toggleClass()"><input type="button" value="Contains class?" onclick="containsClass()"><p>This demo works in Firefox 3.6 and Chrome 8.</p> <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支持。