类的操作

使用className优化CSS样式修改的性能与实践

最新推荐文章于 2024-03-10 20:24:03 发布

原创最新推荐文章于 2024-03-10 20:24:03 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

JavaScript学习笔记专栏收录该内容

60 篇文章

订阅专栏

本文探讨了通过style属性直接修改元素样式与使用className间接修改样式之间的性能差异。使用className可以一次性修改多个样式，提高浏览器渲染效率，同时有利于表现和行为的分离。示例代码展示了如何通过JavaScript动态切换class实现样式变更。

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行性能是比较差的，而且使用这种形式当需要修改多个样式时，也不方便。同时也违背了表现（CSS）和动作（JS）的分离。

class属性

可以通过修改元素的class属性来间接的修改样式，这样一来，只需要修改一次即可同时修改多个样式，浏览器只需要渲染页面一次，性能比较好，并且可以使表现与行为进一步分离。

语法：元素对象.className = "class选择器";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .b1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .b2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .b3{
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            var box = document.getElementById("box");
            btn01.onclick = function(){
                //直接将box的样式b1换成b2
                box.className = "b2";
            };
            btn02.onclick = function(){
                //如果只需要修改一部分的值，比如只改height，不改width
                box.className += " b3";   
                //注意要在b3前加空格，否则会被当成字符串，进行拼串处理             
            };

        };
    </script>
</head>
<body>
    <button id="btn01">点我改变box样式</button>
    <button id="btn02">点我改变box样式</button>
    <br><br>
    <div id="box" class="b1"></div>
</body>
</html>