1 <!--DOCTYPE html-->
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style>
6 *{ text-align:center;}
7 input{ margin-top:30px; padding:10px 20px;}
8 #div1{ width:500px; height:300px; background:red; margin:10px auto;}
9 </style>
10 </head>
11 <body>
12 <input type="button" value="style" id="btn" />
13 <div id="div1"></div>
14
15 <script>
16 //获取非行间css样式
17 function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
18 if(obj.currentStyle){ //针对ie获取非行间样式
19 return obj.currentStyle[attr];
20 }else{
21 return getComputedStyle(obj,false)[attr]; //针对非ie
22 };
23 };
24 //为对象写入/获取css样式
25 function css(obj,attr,value){ //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式
26 if(arguments.length == 2){ //arguments参数数组，当参数数组长度为2时表示获取css样式
27 return getStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数
28 }else{
29 if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值
30 obj.style[attr] = value;
31 };
32 };
33 };
34 window.onload = function(){
35 var oDiv = document.getElementById("div1");
36 var oBtn = document.getElementById("btn");
37 oBtn.onclick = function(){
38 alert(getStyle(oDiv,"height"));
39 css(oDiv,"background","green");
40 alert(css(oDiv,"width"));
41 };
42 };
43 </script>
44 </body>
45 </html>
