在對網頁進行調試的過程中，經常會用到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.封裝成函數
1.
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 }