<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>脚本操作CSS</title> <style type="text/css"> *{margin:0;border: none;padding: 0;} .box{ position: relative; width:100%; height: 50px; background-color: #CCCCCC; } .box:before{ content:''; position: absolute; left: 0; top: 0; width:100%; height: 10px; background-color: lightblue; } .shadow{ box-shadow: 6px 6px 6px rgba(0,0,0,0.7); } .btns{ position: relative; margin-top: 30px; width: 100%; } </style> <script> document.addEventListener('DOMContentLoaded',function(e){ // 读CSS属性 document.querySelector('#readCss').addEventListener('click',function(e){ let ele = document.querySelector('#box'); let styles = document.defaultView.getComputedStyle(ele,null); let afterStyles = window.getComputedStyle(ele,':before'); console.log('div样式',`宽:${styles.width},高:${styles.height}`); console.log(':before样式',`宽:${afterStyles.width},高:${afterStyles.height}`); },false); // 写CSS属性 document.querySelector('#writeCss').addEventListener('click',function(e){ document.querySelector('#box').style.height = '100px'; },false); // 增加CSS类 document.querySelector('#addClass').addEventListener('click',function(e){ document.querySelector('#box').classList.add('shadow'); },false); // 删除CSS类 document.querySelector('#removeClass').addEventListener('click',function(e){ document.querySelector('#box').classList.remove('shadow'); },false); // 切换CSS类 document.querySelector('#toggleClass').addEventListener('click',function(e){ document.querySelector('#box').classList.toggle('shadow'); },false); },false); </script> </head> <body> <div id="box" class="box"> </div> <p class="btns"> <a id="readCss">读CSS属性</a> <a id="writeCss">写CSS属性</a> <a id="addClass">增加CSS类</a> <a id="removeClass">删除CSS类</a> <a id="toggleClass">切换CSS类</a> </p> </body> </html>