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