JavaScript对CSS类的操作

最新推荐文章于 2023-11-08 23:32:38 发布

冰雪奇缘lb

最新推荐文章于 2023-11-08 23:32:38 发布

阅读量120

点赞数

分类专栏： JavaScript复盘重点总结

本文链接：https://blog.csdn.net/weixin_44682587/article/details/115873792

版权

JavaScript复盘重点总结专栏收录该内容

28 篇文章 2 订阅

订阅专栏

JavaScript对CSS类的操作

作用：一行代码，可以同时修改多个样式，修改box的class属性。
通过修改元素的class属性来间接的修改样式。
这样一来，只需要修改一次，即可同时修改多个样式。
优点：浏览器只需要重新渲染页面一次，性能比较好。并且这种方式,可以使表现和行为进一步的分离。

举例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM</title>
	</head>
	<body>
        <div class="box"></div>
        <button id="btn" style="display: block; margin: 10px auto;">点我改变</button>
	</body>
    
</html>
<script>
    var box = document.getElementsByClassName("box")[0];
    var btn = document.getElementById("btn");
    console.log(box);
    console.log(btn);
    
    btn.onclick = function(){
        if(box.className == "box") {
            box.className = "box1";
        } else {
            box.className = "box";
        }
        // box.className += " box1";
    };
</script>
<style>
    .box{
        width: 300px;
        height: 300px;
        background: red;
        margin: 0 auto;
        opacity: 0.5;
    }
    .box1{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background: #008000;
    }
</style>