兼容的获取样式的函数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>

 

你可能感兴趣的:(style)