当前位置：首页 > article >正文

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

article 2025/1/7 4:44:39

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>