【JavaScript】45_间接修改css样式

16、间接修改css样式

除了直接修改样式外,也可以通过修改class属性来间接的修改样式

通过class修改样式的好处:

  1. 可以一次性修改多个样式
  2. 对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>

你可能感兴趣的:(JavaScript,javascript,css,前端,vue.js,react.js)