Richard Tyson

导航

兼容的获取样式的函数getStyle()

想要得到某个元素的某个样式属性，可以用：

1 <div id="div01" style="color:red">123</div>
2 
3 var ele = document.getElementById("div01");
4 console.log(ele.style.color);

 

但这样只能得到写在元素上的行内样式，对于link进来的样式文件或<style></style>中写的样式是获取不到的。

标准浏览器提供了一个getComputedStyle函数，具体用法是:

1 // 第一个参数为要获取样式的节点，第二个参数为伪类，如:hover，如果没有就填false或null.返回CSSStyleDeclaration对象；
2 window.getComputedStyle(element,伪类)
3 
4 //可以通过属性名来获得需要的样式，下面就得到了元素的字体颜色
5 window.getComputedStyle(ele,false)["color"];

 

可IE不支持，但它提供了一个currentStyle对象，得到的结果和getComputedStyle差不多

1 // IE下通过这种方式也可以得到元素的字体颜色
2 ele.currentStyle["color"];

 

综合上面的情况，我们做一下兼容便可以得到靠谱的解决方法！

1 function getStyle(ele,name){
2   if (ele.currentStyle) { // IE下的处理
3       return ele.currentStyle[name];
4   } else { // 标准浏览器处理
5        return getComputedStyle(ele, false)[name]; 
6   }  
7 }

 

再去获取div01的样式的时候就很方便了！

完整代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>demo</title>
 6   <style>
 7     #div01{font-size:16px;}
 8   </style>
 9 </head>
10 <body>
11     <div id="div01" style="color:red">123</div>
12   <script>
13   function getStyle(ele,name){
14       if (ele.currentStyle) {
15         return ele.currentStyle[name];
16       } else {
17         return getComputedStyle(ele, false)[name]; 
18       }
19   }
20 
21   var ele = document.getElementById("div01");
22 
23   console.log(getStyle(ele,"color")); // rgb(255, 0, 0)
24   console.log(getStyle(ele,"fontSize")); // 16px
25 
26   </script>
27 </body>
28 </html>

 

posted on 2015-03-08 00:14  tyson  阅读(952)  评论(0)  编辑  收藏  举报