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支持。

参考链接：http://www.2cto.com/kf/201409/331425.html