那如果元素即沒有在style屬性中設置寬高，也沒有在樣式表中設置寬高，還能用getComputedStyle或currentStyle獲取嗎？答案是getComputedStyle可以，currentStyle不可以 。
實際項目中，可能要獲取元素的CSS樣式屬性值，然后再進行其他的操作。
在操作中可能會遇到這種情況，有時候能夠正確獲取CSS屬性值，有時候則不能。
下面通過代碼實例分析一下出現這種問題的原因，以及解決方案。
首先看一段代碼實例：
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>getComputedStyle使用</title> <style type="text/css"> div{ width:100px; height:100px; margin-top:20px; } #first{background-color:red} </style> <script type="text/javascript"> window.onload=function(){ var first=document.getElementById("first"); var second=document.getElementById("second"); alert(first.style.backgroundColor); alert(second.style.backgroundColor); } </script> </head> <body> <div id="first"></div> <div id="second" style="background-color:blue"></div> </body> </html>
代碼運行后，順利彈出第二個div的背景顏色，第一個的沒有獲取到。
不少初學者一開始可能人為dom元素對象的style屬性無所不能，不但能設置元素的樣式，也能夠獲取到對應的樣式，但它不是萬能的，它只能夠獲取通過style設置的元素CSS屬性值：
（1）.style內簽到HTML標簽內設置。
（2）.dom.style.width="100px"這樣類似設置。
這時getComputedStyle方法的作用就得以體現，它可以獲取指定元素對應CSS屬性的最終計算值。
語法結構：
window.getComputedStyle(element, [pseudoElt])
參數解析:
（1）.element：必需，要獲取樣式值的元素對象。
（2）.pseudoElt：可選，表示指定節點的偽元素（:before、:after、:first-line、:first-letter等）。
瀏覽器支持:
（1）.IE9+瀏覽器支持此方法。
（2）.edge瀏覽器支持此方法。
（3）.谷歌瀏覽器支持此方法。
（4）.opera瀏覽器支持此方法。
（5）.火狐瀏覽器支持此方法。
（6）.safria瀏覽器支持此方法。
代碼實例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>getComputedStyle使用</title> <style type="text/css"> div{ width:100px; height:100px; margin-top:20px; } #first{background-color:red} </style> <script type="text/javascript"> window.onload=function(){ var first=document.getElementById("first"); var second=document.getElementById("second"); alert(window.getComputedStyle(first,null).backgroundColor); alert(second.style.backgroundColor); } </script> </head> <body> <div id="first"></div> <div id="second" style="background-color:blue"></div> </body> </html>
以上代碼成功的獲取了第一個div的背景顏色。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>getComputedStyle使用</title> <style type="text/css"> div{ width:100px; height:100px; margin-top:20px; } #first{background-color:red} #first::before{ content:"添加的內容"; color:#0000ff; } </style> <script type="text/javascript"> window.onload=function(){ var first=document.getElementById("first"); var second=document.getElementById("second"); alert(window.getComputedStyle(first,":before").color); } </script> </head> <body> <div id="first"></div> <div id="second" style="background-color:blue"></div> </body> </html>
以上代碼可以獲取偽元素中字體顏色值（顏色會被轉換成RGB或者RGBA模式）。
不能直接獲取復合屬性值，例如padding屬性的值，只能讀paddingLeft、paddingTop等屬性。