网页样式动态修改技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/linqunbin/article/details/91129859

本文介绍了一种通过修改HTML元素的class属性来高效地更新网页样式的JavaScript技巧，避免了频繁调用style属性导致的浏览器多次重绘问题，提高了网页性能。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .b1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .classTmp{
            width: 1200px;
        }
    </style>
    <script>
        window.onload = function(){
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            var box = document.getElementById('box');
            btn1.onclick = function(){
                // 修改box样式
                /*
                通过style属性修改元素的样式,每修改一次样式,游览器需要重新渲染一次页面
                    这样执行性能比较差,而且这种形式,当我们要修改多个样式时,也不太方便.
                */
                // box.style.width = '200px';
                // box.style.height = '300px';
                // box.style.backgroundColor = 'black';

                /*
                我希望一行代码,可以同时修改多个样式

                修改box的class属性
                    我们可以通过修改元素的class属性,来间接的修改样式
                    这样一来,我们只需要修改一次,即可同时修改多个样式
                    此时游览器只需重新渲染一次,性能比较好
                    并且这种方式,可以使表现和行为进一步分离
                */
                // box.className = 'classTmp';
                // 如果想同时使用原有的className样式,以及新增的className样式,可以用如下代码
                // 注意引号要加个空格
                // box.className += ' classTmp';
                // addClass(box, 'classTmp');
                toggleClass(box, 'classTmp');
            };
            btn2.onclick = function(){
                removeClass(box, 'classTmp');
            }
        };
        // 定义一个函数,用来向一个元素中添加指定的class属性值
        /*
        参数:
            obj:要添加class属性的元素
            cn:要添加的class值
        */
        function addClass(obj, cn){
            // 检查obj中是否含有cn
            if(!hasClass(obj, cn)){
                obj.className += " " + cn;
            };
        };

        /*
        判断元素中是否含有指定的class属性值
            如果有该class,则返回true,没有则返回false
        */
        function hasClass(obj, cn){
            // 判断obj中有没有cn class
            // 创建一个正则表达式
            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, '');
      };

      /*
      toggleClass可以用来切换一个类
        如果元素有该类,则删除
        如果元素没有该类,则添加
      */
     function toggleClass(obj, cn){
        // 判断obj中是否含有cn
        if(hasClass(obj, cn)){
            // 有,则删除
            removeClass(obj, cn);
        }else{
            // 没有,则添加
            addClass(obj, cn);
        };
     };
    </script>
</head>
<body>
    <button id="btn1">点击按钮以后,修改box样式</button>
    <button id="btn2">点击按钮以后,删除box添加的样式</button>
    <br><br>
    <div id="box" class="b1"></div>
</body>
</html>

JS基础-类的操作