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>
