在对网页进行调试的过程中，经常会用到js来获取元素的CSS样式，

1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），而无法获取定义在<style type="text/css">里面的样式属性值

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JS获取CSS属性值</title> 
<style type=”text/css”>
    #css{color:blue;}
</style> 
</head> 

<body> 
<div id="css" class="ss" style="width:100px;height:150px;background:red">JS获取CSS属性值</div> 

<script> 
    alert(document.getElementById("css").style.width);   //100px
    alert(document.getElementById("css").style.height);  //150px
    alert(document.getElementById("css").style.color);   //弹出空白，获取不到type=”text/css”里的属性值
</script> 
</body> 
</html>

代码运行后，顺利弹出第一个div的宽度、高度，但是最后一个文字颜色却弹出空白。

之前很多朋友可能认为dom.style属性无所不能，不但能设置元素的样式，也能够获取到对应的样式值。

然而事实是，dom.style只能够获取通过如下方式设置的CSS属性值：

（1）.HTML标签的style属性设置CSS属性值。

（2）.dom.style.width="100px"这样类似设置CSS属性值。

此时，getComputedStyle方法的功能得以体现，它可以获取元素CSS属性的最终计算值。

2.IE中使用的是obj.currentStyle方法，其他浏览器用的是getComputedStyle 方法 

TIP:所有浏览器均支持此方法，IE9+浏览器支持此方法。

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。

　　window.getComputedStyle(element, [pseudoElt])

（1）.element：必需，要获取样式值的元素节点对象。

（2）.pseudoElt：可选，表示指定元素节点的伪元素（:before、:after、:first-line、:first-letter等）

1 <html> 
 2 <head> 
 3 <title>计算元素样式getComutedStyle方法</title> 
 4 <style> 
 5 #myDiv { 
 6     background-color:red;
 7     width:100px; 
 8     height:200px; 
 9 } 
10 </style> 
11 <body> 
12 <div id ="myDiv" style=" border:1px solid blue"></div> 
13 
14 <script> 
15     var myDiv = document.getElementById("myDiv"); 
16     var computedStyle = document.defaultView.getComputedStyle(myDiv, null); 
17 　　//document.defaultView也可改为window
　　　　//在很多代码中也有document.defaultView.getComputedStyle()形式，不过它和window.getComputedStyle()的区别可以忽略不计，除了在IE8的浏览器才会建议使用后者
　　　　//因为在当前的浏览器中一般没有不会有任何问题。

18     alert(computedStyle.backgroundColor); //"red" //rgb(255, 0, 0)
19     alert(computedStyle.width);         //"100px" 
20     alert(computedStyle.height);         //"200px" 
21     alert(computedStyle.border);         //在某些浏览器中是“1px solid black”  //1px solid rgb(0, 0, 255)
22 </script> 
23 </body> 
24 </head> 
25 </html>

3.封装成函数

function getStyle(obj,attr){
       return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
 }
 
 var oDiv = document.getElementById("test");
alert(getStyle(oDiv,"top"));

 

2.下面这个函数，能够获取一个元素的任意 CSS 属性值

1 function getStyle(element, attr) {
2         if(element.currentStyle) {
3                 return element.currentStyle[attr];
4         } else {
5                 return getComputedStyle(element, false)[attr];
6         }
7 }

如果想获得 lists 的 left 属性值，只需要：getStyle(lists,"left")

静则思，思则变，变则通，通则达