JS使用getComputedStyle()方法獲取CSS屬性值
在對網頁進行除錯的過程中，經常會用到js來獲取元素的CSS樣式，方法有很多很多，現在僅把我經常用的方法總結如下：
1. obj.style：這個方法只能JS只能獲取寫在html標籤中的寫在style屬性中的值（style=”…”），而無法獲取定義在<style type="text/css">裡面的屬性。
程式碼如下:
1 <html xmlns=”http://www.w3.org/1999/xhtml“>
2 <head>
3 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
4 <title>JS獲取CSS屬性值</title>
5 <style type=”text/css”>
6
7 .ss{color:#cdcdcd;}
8
9 </style>
10 </head>
11
12 <body>
13 <div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS獲取CSS屬性值</div>
14
15 <script type=”text/javascript”>
16 alert(document.getElementById(“css88″).style.width);//200px
17 alert(document.getElementById(“css88″).style.color);//空白
18 </script>
19 </body>
20 </html>
2. IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法
“DOM2級樣式”增強了document.defaultView，提供了getComputedStyle()方法。這個方法接受兩個引數：要取得計算樣式的元素和一個偽元素字串（例如“:after”）。如果不需要偽元素資訊，第二個引數可以是null。getComputerStyle()方法返回一個CSSStyleDeclaration物件，其中包含當前元素的所有計算的樣式。以下面的HTML頁面為例：
程式碼如下:
1 <html>
2 <head>
3 <title>計算元素樣式</title>
4 <style>
5 #myDiv {
6 width:100px;
7 height:200px;
8 }
9 </style>
10 <body>
11 <div id ="myDiv" style=" border:1px solid black"></div>
12
13 <script>
14 var myDiv = document.getElementById("myDiv");
15 var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
16
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>
邊框屬性可能也不會返回樣式表中實際的border規則（Opera會返回，但其它瀏覽器不會）。存在這個差別的原因是不同瀏覽器解釋綜合屬性的方式不同，因為設定這種屬性實際上會涉及很多其他的屬性。在設定border時，實際上是設定了四個邊的邊框寬度、顏色、樣式屬性。因此，即使computedStyle.border不會在所有瀏覽器中都返回值，但computedStyle.borderLeftWidth則會返回值。
需要注意的是，即使有些瀏覽器支援這種功能，但表示值的方式可能會有所區別。例如，Firefox和Safari會返回將所有顏色轉換成RGB格式。因此，即使getComputedStyle()方法時，最好多在幾種瀏覽器中測試一下。
IE不支援getComputedStyle()方法，但它有一種類似的概念。在IE中，每個具有style屬性的元素還有一個currentStyle屬性。這個屬性是CSSStyleDeclaration的例項，包含當前元素全部計算後的樣式。取得這些樣式的方法差不多，如下：
程式碼如下:
<span style="font-family:Arial;font-size:14px;">var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined</span>
與DOM版本的方式一樣，IE也沒有返回border樣式，因為這是一個綜合屬性。
3. 我自己在寫測試case過程中寫的一個簡單的函式（適用於Chrome）：
程式碼如下:
<span style="font-family:Arial;font-size:14px;">
function getCSS(div){
return document.defaultView.getComputedStyle(div, null); //return div.currentStyle;//沒用過，IE
}
</span>
——————————————————————————————————————
慕課網評論：
下面這個函式，能夠獲取一個元素的任意 CSS 屬性值。
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
比如，本例中如果想獲得 lists 的 left 屬性值，只需要
getStyle(lists,"left")
就可以啦。
為了讓更多同學看到這個方法，請幫忙頂上去，謝謝！