JS中动态增删类 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box{
 8                 width: 300px;
 9                 height: 300px;
10             }
11             .colors{
12                 background-color: yellow
13             }
14             .sizes{
15                 font-size: 30px;
16                 line-height: 300px;
17             }
18         </style>
19     </head>
20     <body>    
21         <div class="box colors">
22             <span>居中</span>
23         </div>
24         <span>原先的css样式：宽高300px,背景颜色黄色,字体大小16px</span>
25         <button>调整字体大小</button>
26         <button>删除背景颜色</button>
27         <button>切换字体/背景</button>
28         <script type="text/javascript">
29             let a = document.querySelectorAll('button')
30             let b = document.querySelectorAll('div') 
31             a[0].onclick = () => {
32                 b[0].classList.add('sizes')
33                 console.log(b[0].classList)
34             }
35             a[1].onclick = () => {
36                 b[0].classList.remove('colors')
37             }
38             a[2].onclick = () => {
39                 b[0].classList.toggle('sizes')
40                 b[0].classList.toggle('colors')
41             }
42             console.log(b[0].classList);
43         </script>
44     </body>
45 </html>

 

posted @ 2020-08-07 16:33  yw3692582  阅读(75)  评论(0)    收藏  举报