在對網(wǎng)頁進(jìn)行調(diào)試的過程中，經(jīng)常會用到j(luò)s來獲取元素的CSS樣式，方法有很多很多，現(xiàn)在僅把我經(jīng)常用的方法總結(jié)如下：
1. obj.style：這個(gè)方法只能JS只能獲取寫在html標(biāo)簽中的寫在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級樣式”增強(qiáng)了document.defaultView，提供了getComputedStyle()方法。這個(gè)方法接受兩個(gè)參數(shù)：要取得計(jì)算樣式的元素和一個(gè)偽元素字符串（例如“:after”）。如果不需要偽元素信息，第二個(gè)參數(shù)可以是null。getComputerStyle()方法返回一個(gè)CSSStyleDeclaration對象，其中包含當(dāng)前元素的所有計(jì)算的樣式。以下面的HTML頁面為例：
代碼如下:
1 <html> 2 <head> 3 <title>計(jì)算元素樣式</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>邊框?qū)傩钥赡芤膊粫祷貥邮奖碇袑?shí)際的border規(guī)則（Opera會返回，但其它瀏覽器不會）。存在這個(gè)差別的原因是不同瀏覽器解釋綜合屬性的方式不同，因?yàn)樵O(shè)置這種屬性實(shí)際上會涉及很多其他的屬性。在設(shè)置border時(shí)，實(shí)際上是設(shè)置了四個(gè)邊的邊框?qū)挾取㈩伾邮綄傩?。因此，即使computedStyle.border不會在所有瀏覽器中都返回值，但computedStyle.borderLeftWidth則會返回值。
需要注意的是，即使有些瀏覽器支持這種功能，但表示值的方式可能會有所區(qū)別。例如，F(xiàn)irefox和Safari會返回將所有顏色轉(zhuǎn)換成RGB格式。因此，即使getComputedStyle()方法時(shí)，最好多在幾種瀏覽器中測試一下。
IE不支持getComputedStyle()方法，但它有一種類似的概念。在IE中，每個(gè)具有style屬性的元素還有一個(gè)currentStyle屬性。這個(gè)屬性是CSSStyleDeclaration的實(shí)例，包含當(dāng)前元素全部計(jì)算后的樣式。取得這些樣式的方法差不多，如下：
<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樣式，因?yàn)檫@是一個(gè)綜合屬性。
3. 我自己在寫測試case過程中寫的一個(gè)簡單的函數(shù)（適用于Chrome）：
