类的操作

周白卿

于 2022-07-26 11:07:38 发布

阅读量178

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/qq_51088023/article/details/125989414

版权

html 前端 javascript

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

60 篇文章 1 订阅

订阅专栏

通过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>