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" οnclick="addClass()">
<input type="button" value="Remove class" οnclick="removeClass()">
<input type="button" value="Toggle class" οnclick="toggleClass()">
<input type="button" value="Contains class?" οnclick="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支持。


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页