关于获取、设置css样式封装的函数入门版 

 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>

 

posted @ 2016-11-22 23:32  安慕希  阅读(1370)  评论(0)    收藏  举报