JS中类的操作（类的增、删、改、查）

最新推荐文章于 2023-12-11 13:17:42 发布

Fantasc

最新推荐文章于 2023-12-11 13:17:42 发布

阅读量391

点赞数

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119807829

版权

JS基础学习专栏收录该内容

78 篇文章 8 订阅

订阅专栏

修改元素的样式

当我们需要修改元素的样式的时候，往往可以通过style属性的对相应的样式进行修改，但是使用这种方式进行修改有缺点：每修改一次样式，浏览器就需要重新渲染一次页面，这样修改起来会降低代码执行的效率，在需要同时对多个样式做修改的时候也极为不方便。
```
元素名.style.样式名 = “对应的样式”;//如果修改的是像素值，要在末尾拼串，加上“px”
```
相比通过style属性来对元素的样式进行修改，我们可以将一个或多个样式写在另外一个class类里面，在通过修改class来达到修改元素样式的目的。
- 这种方式可以间接对元素的样式进行修改，只需要修改一次，就能修改多个样式，这种方式会将原有的样式替换掉。
  
  优点：浏览器只需要重新渲染一次页面，性能较高，可以将行为（JS）和表现（CSS）进一步分离。
```
元素名.className = "新的class类名";
```
在原有的样式上进行修改，将新的类添加在class中，注意：在添加新class类的时候，此方法中新类前面必须有空格。使用这种方式修改样式，原来的class类里有的样式会被覆盖掉，没有的样式就会添加进去。
```
元素名.className += " cc";//注意cc前面的空格，在此方法中是必须的
```

使用函数来对元素中的样式进行修改：

定义函数来添加样式

/* 
    定义一个函数，向一个元素中添加指定的class属性值
	参数：
        - obj 要添加样式的元素名
        - cn class类名
*/
function addClass(obj,cn){
    if(!check(obj,cn)){
        obj.className += " " +cn;
    }
}

定义函数来检查一个元素中是否有指定的class属性

//判断一个元素中是否有指定的class属性值
function check(obj,cn){
    // var reg = /\bb2\b/;//\b表示单词边界，
    //通过构造函数来
    var reg = new RegExp("\\b"+cn+"\\b");
    return reg.test(obj.className);
}

定义一个函数，用来删除相应的class属性

function removeClass(obj,cn){
    //创建正则表达式
    var reg = new RegExp("\\b"+cn+"\\b");
    //删除class
    obj.className = obj.className.replace(reg,"");//使用空串来代替，即删除
}

定义一个函数，用来替换元素中的class类，如果元素中已经有相应的类了，则将其删除，如果没有则添加进去。

function toggleClass(obj, cn){
    //判断obj里面是否有cn
    if(check(obj,cn)){
        removeClass(obj,cn);
    }else{
        addClass(obj,cn);
    }
}

完整的练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .block{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .cc{
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var one = document.getElementById("one");
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                // one.className += " cc";
                // addclass(one,"cc");//添加cc
                // alert(check(one,"cc")); //检查one元素中是否有cc，有就返回true,否则返回false
                // removeClass(one,"cc");//删除cc
                toggleClass(one,"cc");
            };
        };
        /* 
            定义一个函数，用来向一个元素中添加指定的class属性值

            参数：
                - obj 要添加样式的元素名
                - cn class类名
        */
        function addClass(obj,cn){
            if(!check(obj,cn)){
                obj.className += " " +cn;
            }
        }
        //判断一个元素中是否有指定的class属性值
        function check(obj,cn){
            //使用正则表达式的方式，就将字面量写死了，不便修改
            // var reg = /\bb2\b/;//\b表示单词边界，
            //通过构造函数来
            var reg = new RegExp("\\b"+cn+"\\b");
            return reg.test(obj.className);
        }
        function removeClass(obj,cn){
            var reg = new RegExp("\\b"+cn+"\\b");
            //删除class
            obj.className = obj.className.replace(reg,"");
        }
        function toggleClass(obj, cn){
            //判断obj里面是否有cn
            if(check(obj,cn)){
                removeClass(obj,cn);
            }else{
                addClass(obj,cn);
            }
        }
    </script>
</head>
<body>
    <button id="btn">点击按钮修改div的样式</button></br></br>
    <div id="one" class="block"></div>
</body>
</html>