16、间接修改css样式
除了直接修改样式外，也可以通过修改class属性来间接的修改样式
通过class修改样式的好处：
- 可以一次性修改多个样式
- 对JS和CSS进行解耦
元素.classList
是一个对象，对象中提供了对当前元素的类的各种操作方法
元素.classList.add() ：向元素中添加一个或多个class
元素.classList.remove()： 移除元素中的一个或多个class
元素.classList.toggle() ：切换元素中的class
元素.classList.replace()： 替换class
元素.classList.contains() ：检查class
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
background-color: yellow;
width: 300px;
height: 500px;
border: 10px greenyellow solid;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div class="box1 box3 box4"></div>
<script>
//点击按钮后，修改box1的宽度
const btn = document.getElementById("btn")
const box1 = document.querySelector(".box1")
btn.onclick = function(){
//除了直接修改样式外，也可以通过修改class属性来间接的修改样式
// box1.className += 'box2'
// box1.classList.add('box2','box3','box4')
// box1.classList.add('box1')
// box1.classList.remove('box2')
box1.classList.toggle('box2')
// box1.classList.replace('box2')
let result = box1.classList.contains('box3')
console.log(result)
}
</script>
</body>
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
