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>