1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>CSS样式的获取和设置:简单版</title> 5 <style type="text/css"> 6 #div { 7 width: 100px; 8 height: 100px; 9 background: pink; 10 } 11 </style> 12 <script type="text/javascript"> 13 //根据id获取元素 14 function $(id) { 15 return document.getElementById(id); 16 } 17 //获取样式 18 function getStyle(obj, attr) { 19 //哪个对象obj 20 //哪个属性attr 21 //兼容IE 22 if (obj.currentStyle) { 23 return obj.currentStyle[attr]; 24 } 25 else { 26 //兼容谷歌 火狐 27 return getComputedStyle(obj, false)[attr]; 28 } 29 } 30 31 //获取或者设置CSS的属性 32 function css(obj, attr, value) { 33 //获取CSS的数值 34 if (arguments.length == 2) { 35 return getStyle(obj, attr); 36 } 37 //设置CSS的数值 38 if (arguments.length == 3) { 39 obj.style[attr] = value; 40 } 41 } 42 //调用CSS()方法,进行测试 43 window.onload = function() { 44 css($("div"), "width", “200px”); 45 } 46 // 最后可以把这写在一起,一个函数就搞定 47 function css(obj,attr,value){ 48 var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]; 49 if(arguments.length === 2){ 50 return getStyle; 51 52 }else if(arguments.length === 3){ 53 obj.style[attr] = value; 54 } 55 } 56 </script> 57 </head> 58 <body> 59 <div id="div"></div> 60 </body> 61 </html>