HTML5-通过classList获取html元素的所有class名

1 浏览发布于 作者 zouyang留下评论分享按钮

HTML5 有个新属性:classList属性,它可以弹出所有的class名称。classList是一个类数组的对象。下例是打印 div 的 class 的值。

    <script>
        window.onload = function(){
            var oDiv = document.getElementById("box");
            console.log(oDiv.classList);
        }
    </script>

    ……
 
    <div id="box" class="box1 box2 box3"></div>

另外,classList 下面还有几个方法与属性:

  • length:class 的长度,上例执行 console.log(oDiv.classList.length); 则会打印出3
  • add():添加 class,上例执行 oDiv.classList.add(“box4”); 即可添加一个 box4 的class名进去
  • remove():删除 class 的方法,上例执行 oDiv.classList.remove(“box2”); 则会删除 box2 这个class名
  • toggle():切换 class,上例如果执行一次 oDiv.classList.toggle(“box4”); 则会添加一个 box4 的 class名进去,如果再执行一次 oDiv.classList.toggle(“box4”); 则会删除刚刚添加的 box4。它的意思就是 如果 toggle 传入的 class 名,在原来的class 内存在,则是执行删除操作,如果不存在,则是从末尾添加进去 class 。
            oDiv.classList.toggle("box4"); //添加上 box4 这个 class
            console.log(oDiv.classList);
            oDiv.classList.toggle("box4"); //再次执行会删除 box4 这个 class
            console.log(oDiv.classList);

想要打赏,请点击这里

发表评论

电子邮件地址不会被公开。 必填项已用*标注