JS使用getComputedStyle()方法获取CSS属性值

首先，平时在对网页进行调试的过程中，我们经常会用到js来获取元素的CSS样式，方法有很多，现在将我总结的方法写下。

1.obj.style:这个方法我们在平常使用中比较方便但是也有不足，那就是：只能获取写在style属性的值（即行内式），而无法获取内嵌式：

（即：<style type="text/css"></style>）中的样式。PS：外链式更不用说了。

code:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         .ss {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13 <div class="ss" style="background-color: blue;"></div>
14 <script type="text/javascript">
15     var one = document.getElementsByClassName("ss")[0];
16     console.log(one.style.color);//空白
17     console.log(one.style.backgroundColor);//blue
18 </script>
19 </body>
20 </html>


2. IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法

DOM2级样式增强了document.defaultView,提供了getComputedStyle()方法。这个方法接受两个参数：

要取得计算样式的元素和一个伪元素字符串（“例如：after”）.

如果步需要伪元素信息，第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration对象。

其中包含当前元素的所有的计算样式。

不过这里我在这里封装了一个方法来解决ie和ff的兼容性问题。

code1:

 

 1 <span style="font-family:Arial;font-size:14px;"><!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>计算元素样式</title>
 5 <style>
 6 #myDiv {
 7 background-color:blue;
 8 width:100px;
 9 height:200px;
10 }
11 </style>
12 <body>
13 <div id ="myDiv" style="background-color:red; border:1px solid black"></div>
14 <script>
15 var myDiv = document.getElementById("myDiv");
16 var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
17 alert(computedStyle.backgroundColor); //"red"
18 alert(computedStyle.width); //"100px"
19 alert(computedStyle.height); //"200px"
20 alert(computedStyle.border); //在某些浏览器中是“1px solid black”
21 </script>
22 </body>
23 </head>
24 </html></span>
View Code

 

code2[封装的兼容性方法]:

1     function getStyle(ele,attr) {
2         if(window.getComputedStyle){
3            return  window.getComputedStyle(ele,null)[attr];
4         }
5         return ele.currentStyle[attr];
6     }

边框属性可能也不会返回样式表中实际的border规则（Opera会返回，但其它浏览器不会）。存在这个差别的原因是不同浏览器解释综合属性的方式不同，因为设置这种属性实际上会涉及很多其他的属性。在设置border时，实际上是设置了四个边的边框宽度、颜色、样式属性。因此，即使computedStyle.border不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth则会返回值。

 

注意：

需要注意的是，即使有些浏览器支持这种功能，但表示值的方式可能会有所区别。例如，Firefox和Safari会返回将所有颜色转换成RGB格式。因此，即使getComputedStyle()方法时，最好多在几种浏览器中测试一下。

 

3：IE不支持getComputedStyle()方法，但它有一种类似的概念。在IE中，每个具有style属性的元素还有一个currentStyle属性。这个属性是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式。取得这些样式的方法差不多，如下：

code:

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         span {
 8             display: inline-block;
 9             width: 100px;
10             height: 00px;
11             color: red;
12             background-color: blue;
13         }
14     </style>
15 </head>
16 <body>
17 <span style="font-size: 14px">Travel in Life</span>
18 <script type="text/javascript">
19     var span = document.getElementsByTagName("span")[0];
20     var computedStyle = span.currentStyle;
21     console.log(computedStyle.fontSize);//12px
22     console.log(computedStyle.width);//100px
23     console.log(computedStyle.height);//100px
24     console.log(computedStyle.color);//red
25     console.log(computedStyle.border);//undefined
26 </script>
27 </body>
28 </html>
View Code

 

与DOM版本的方式一样，IE也没有返回border样式，因为这是一个综合属性。

 

4：个人测试case过程中还发现一个函数（适用于Chrome）

1 <span style="font-family:Arial;font-size:14px;">function getCSS(div){
2 return document.defaultView.getComputedStyle(div, null);
3 //return div.currentStyle;//没用过，IE
4 }</span>

 

posted @ 2017-11-29 19:08  Lay-Buddhist  阅读(160)  评论(0)    收藏  举报