<input type="button" value="恢复样式" onclick="resetStyle();" />
<input type="button" value="修改样式" onclick="setStyle();" />
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 div {
8 width: 200px;
9 height: 200px;
10 background: red;
11 }
12 .active {
13 width: 400px;
14 height: 400px;
15 background: blue;
16 }
17 </style>
18 <script>
19 function setStyle() {
20 var oBox=document.getElementById("box");
21 oBox.className="active";
22 }
23 function resetStyle() {
24 var oBox=document.getElementById("box");
25 oBox.className="";
26 }
27 </script>
28 </head>
29 <body>
30 <input type="button" value="修改样式" onclick="setStyle();" />
31 <input type="button" value="恢复样式" onclick="resetStyle();" />
32 <div id="box"></div>
33 </body>
34 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 div {
8 width: 200px;
9 height: 200px;
10 background: red;
11 }
12 </style>
13 <script>
14 function getStyle() {
15 var oBox=document.getElementById("box");
16 console.log(css(oBox,‘height‘));
17 }
18
19 function css(obj,attr) {
20 //兼容ie8和chrome/ff
21 if (obj.currentStyle) {
22 return obj.currentStyle[attr];
23 } else {
24 return getComputedStyle(obj,false)[attr];
25 }
26 }
27 </script>
28 </head>
29 <body>
30 <input type="button" value="读取" onclick="getStyle();">
31 <div id="box"></div>
32 </body>
33 </html>
原文地址：https://www.cnblogs.com/denggelin/p/9004522.html
时间： 2024-11-11 07:35:43