classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式

本文链接：https://blog.csdn.net/Julienling/article/details/123959008

这篇博客探讨了如何使用JavaScript的classList属性配合add()、remove()、toggle()方法来添加或删除类，从而改变CSS样式。文章讨论了正则表达式、Syntax注意事项以及在元素属于多个类时样式的覆盖情况。还对比了三种方法的优缺点，包括改变内联样式、使用classList方法和自定义函数。同时，提到了removeClass()可能导致的空格遗留问题以及CSS样式的优先级规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

知识储备
方法一：改变内联样式
方法二： `classList`属性配合`add()`、`remove()`、`toggle()`，添加或删除元素的类来改变其样式。
方法三：利用正则表达式、自定义addClass()、removeClass()、toggleClass()函数
- removeClass()这么写，在多次操作同一个类后会有空格遗留问题
CSS样式优先级
- 1.在不考虑继承的情况下，从上到下优先级递减：
- 2.单论样式的继承优先级，从上到下依次递减：

改变某HTML元素样式，有多种方法，各有优缺。推荐方法二：通过添加或切换元素的类来改变其样式。

知识储备

1.正则表达式

双斜杠中，第一个为转义字符。

alert("\\b");

在这里插入图片描述

2.Syntax上需要注意的问题

 			box1.style.width = "200px";
            box1.style.backgroundColor = "#bfa";

赋值时，右值有时要用引号圈起来；
在CSS样式表和内联样式中，形如“background-color"、”border-width"等用-连接起来的样式属性名，在JavaScript中，词法规则变为驼峰，比如“backgroundColor"、“borderWidth”。否则回报语法错误（赋值中左值无效）：
赋值所用到的数字后要跟单位px，并且数字连同px一起被圈在引号里。否则会报语法错误：

3.属于多个类的情况下，样式的覆盖情况

<div id="box1" class="b1 b2"> </div>

表示既属于类b1，又属于类b2。按照排列顺序，靠后的类的CSS样式，会覆盖掉相对靠前的类中与之重合的CSS样式，比如width和background-color；但是不同的样式不会被覆盖掉，比如下图中的height 在这里插入图片描述

方法一：改变内联样式

优点：
- 不需要考虑兼容性；
- 代码量少；
缺点：
- 每执行一句element.style.styleName = " ";，都会重新进行一次整个页面的渲染，在网络拥堵的情况下效果巨差，不符合异步更新策略。因此不推荐使用。

<style>
    .b1{
        width:100px;
        height:100px;
        background-color: coral;
    }
    .b2{
        width:200px;
        background-color:darkseagreen;
    }

</style>
<body>
    <div id = 'box1' class = 'b1'>      
    </div>
    <br>
    <button id="btn01">测试一下</button><br><br>
    <script >

        const btn01 = document.getElementById('btn01');
        const box1 = document.getElementById('box1');
        btn01.onclick = function(){
            box1.style.width = "200px";
            box1.style.backgroundColor = "#bfa";    
        };
  	</script >   
</body>

方法二： `classList`属性配合`add()`、`remove()`、`toggle()`，添加或删除元素的类来改变其样式。

<style>
    .b1{
        width:100px;
        height:100px;
        background-color: coral;
    }
    .b2{
        width:200px;
        background-color:darkseagreen;
    }
    .b3{
        width:200px;
        border-radius: 2px;
        background-color:lightslategray;
    }
</style>
<body>
    <div id = 'box1' class = 'b1'>      
    </div>
    <br>
    <button id="btn01">add</button>&nbsp;&nbsp;
    <button id="btn02">remove</button>&nbsp;&nbsp;
    <button id="btn03">toggle</button>

    <script >

        const btn01 = document.getElementById('btn01');
        const btn02 = document.getElementById('btn02');
        const btn03 = document.getElementById('btn03');
        const box1 = document.getElementById('box1');
              
        //DOM2级的句柄事件,第三个参数表示是否useCapture，是否在捕获阶段触发事件。
        btn01.addEventListener("click", function(){
            box1.classList.add("b2");
        },false);
    
        btn02.addEventListener("click",function(){
            box1.classList.remove("b2");
        },false);

        btn03.addEventListener("click",function(){
            //toggleClass(box1, "b2");
            box1.classList.toggle("b3");
        },false);


   </script>
</body>

</html>

方法三：利用正则表达式、自定义addClass()、removeClass()、toggleClass()函数

首先说明一下，方法三为尚硅谷课程的笔记，课程比较老了，但是老师为大家提供了正则表达式在容错方面的巨大作用。方法二为JS内置函数，自然有容错机制，但是学习方法三也是非常必要的。实际开发中，建议使用方法二。

首先说明一下

<style>
    .b1{
        width:100px;
        height:100px;
        background-color: coral;
    }
    .b2{
        width:200px;
        background-color:darkseagreen;
    }

</style>
<body>
    <div id = 'box1' class = 'b1'>      
    </div>
    <br>
    <button id="btn01">add</button>&nbsp;&nbsp;
    <button id="btn02">remove</button>&nbsp;&nbsp;
    <button id="btn03">toggle</button>

    <script >

        const btn01 = document.getElementById('btn01');
        const btn02 = document.getElementById('btn02');
        const btn03 = document.getElementById('btn03');
        const box1 = document.getElementById('box1');
              
        //DOM2级的句柄事件,第三个参数表示是否useCapture，是否在捕获阶段触发事件。
        btn01.addEventListener("click", function(){
            addClass(box1, "b2");
        },false);
    
        btn02.addEventListener("click",function(){
            removeClass(box1, "b2");
        },false);

        btn03.addEventListener("click",function(){
            toggleClass(box1, "b2"); //自定义函数
        },false);


        function hasClass(obj,cn){
            //两个"\b"之间表示一个单词，boundary，两个\\中，前面一个为转义字符。
            var reg = new RegExp("\\b"+ cn + "\\b");
            //若有cn则返回true，没有则返回false
            return reg.test(obj.className);
        }
        function addClass(obj,cn){
            //当没有cn时，添加；否则什么都不用做。
                if(!hasClass(obj,cn)){
                    obj.className += " " + cn;
                }
        }
        function removeClass(obj, cn){
            if(hasClass(obj,cn)){
                var reg = new RegExp("\\b"+cn+"\\b"); 
                //使用空串替换掉reg，注意空串不等于空格
                obj.className = obj.className.replace(reg, "");
            }
        }

        function toggleClass(obj, cn){
        	//调用上述自定义函数
            if(hasClass(obj, cn)){
                //有，则删除
                remove(obj, cn);
            }else{
                //没有，则添加
                addClass(obj, cn);
            }
        }
   </script>
</body>

removeClass()这么写，在多次操作同一个类后会有空格遗留问题

		function removeClass(obj, cn){
            if(hasClass(obj,cn)){
                var reg = new RegExp("\\b"+cn+"\\b"); 
                obj.className = obj.className.replace(reg, "");
                //obj.classList.remove(cn);
            }
        }

上述方法会在add和remove同一个类多次之后，造成空格遗留问题。
在这里插入图片描述

CSS样式优先级

1.在不考虑继承的情况下，从上到下优先级递减：

属性后插有 !important 的属性拥有最高优先级;，且不会被覆盖掉。

.b1{
    width:100px;
    height:100px;
    background-color: coral !important;
}

内联样式

<!-- 在html中，赋值运算符的右边要被引号圈起来；而键值对的右边不能被引号圈起来 -->
<div id = 'box1' style="background-color: cadetblue; width: 300px;"></div>

样式表样式

.b1{
    width:100px;
    height:100px;
    background-color: coral !important;
}

2.单论样式的继承优先级，从上到下依次递减：

直接样式

<!-- 类名为 son 的 div 的 color 为 coral -->
<div style="color: red">
    <div style="color: blue">
        <div class="son" style="color: coral"></div>
    </div>
</div>