javascript高级程序设计---classList属性

最新推荐文章于 2024-03-09 15:41:20 发布

zz410675629

最新推荐文章于 2024-03-09 15:41:20 发布

阅读量1.5k

点赞数

分类专栏： javascript高级程序设计

本文链接：https://blog.csdn.net/zz410675629/article/details/39120009

版权

javascript高级程序设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

具体使用案例如下：

<!DOCTYPE html>
<html>
<head>
    <title>classList Example</title>
    <style>
        .highlight {
            background: yellow;
        }
    </style>
</head>
<body>
    <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>
    
</body>
</html>

注：但是目前classList属性只有FireFox3.6+和Chrome支持。

zz410675629

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript高级程序设计---classList属性

1、传统方法：在操作类名的时候，需要通过className属性添加、删除和替换类名。如下面例子：...这个div中一共有三个类名，要从中删掉一个类名，需要把这三个类分别拆开，然后进行处理，处理过程如下： var className=div.className.split(/\s+/); //找到要删掉的类名 var pos=-1,
复制链接

扫一扫

专栏目录