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>