前面的話

　　元素的渲染結果是多個CSS樣式博弈后的最終結果，這也是CSS中的C(cascade)層疊的含義。訪問第一篇中的style屬性只能獲取行間樣式，這通常來說，并不是我們想要的結果。本文將詳細介紹如何查詢計算樣式

?

getComputedStyle()

　　元素的計算樣式(computedStyle)是一組在顯示元素時實際使用的屬性值，也是用一個 CSSStyleDeclaration對象來表示的，但計算樣式是只讀的，主要通過getComputedStyle()方法實現

　　getComputedStyle()方法接收兩個參數：要取得計算樣式的元素和一個偽元素字符串。如果不需要偽元素信息，第二個參數可以是null。getComputedStyle()方法返回一個CSSStyleDeclaration對象，其中包含當前元素的所有計算的樣式

　　[注意]IE8-瀏覽器不支持

　　getComputedStyle()方法原本是window對象下的方法，后來“DOM2級樣式”增強了document.defaultView，也提供了getComputedStyle()方法。所以getComputedStyle()方法一共有下面3種寫法

　　1、document.defaultView.getComputedStyle(div).width

　　2、window.getComputedStyle(div).width

　　3、getComputedStyle(div).width

　　其中第3種寫法最簡單

<div id="test" style="width: 100px;"></div> <script> //下面三行代碼的結果都一樣，IE8-瀏覽器報錯，其他瀏覽器返回'100px' console.log(document.defaultView.getComputedStyle(test).width); console.log(window.getComputedStyle(test).width); console.log(getComputedStyle(test).width); </script>

偽元素

　　第二個參數代表偽元素字符串，包括":before"、":after"、":first-line"等，如果設置為null或省略不寫，則返回自身元素的CSSStyleDeclaration對象

　　[注意]關于偽元素的詳細內容移步至此

<style> #test:before{content:'';width:20px;display:inline-block; } </style> <div id="test" style="width: 100px;"></div> <script> //IE8-瀏覽器報錯，其他瀏覽器返回'20px' console.log(getComputedStyle(test,':before').width); </script>

?

注意事項

　　在使用getComputedStyle()方法的過程中，有如下注意事項：

　　【1】對于font、background、border等復合樣式，各瀏覽器處理不一樣。chrome會返回整個復合樣式，而IE9 、firefox和safari則輸出空字符串''

<div id="test" style="font-size:20px"></div> <script> //IE8-瀏覽器報錯，chrome返回normal normal normal normal 20px / normal Simsun，其他瀏覽器返回'' console.log(getComputedStyle(test).font); </script>

　　【2】不論以什么格式設置顏色，瀏覽器都以rgb()或rgba()的形式輸出

<div id="test" style="color:red"></div> <script> //IE8-瀏覽器報錯，其他瀏覽器返回rgb(255, 0, 0) console.log(getComputedStyle(test).color); </script>

　　【3】在計算樣式中，類似百分比等相對單位會轉換為絕對值

<div id="test" style="width:20%;"></div> <script> //IE8-瀏覽器報錯，其他瀏覽器返回'304px' console.log(getComputedStyle(test).width); </script>

?

currentStyle

　　IE8-瀏覽器不支持getComputedStyle()方法，但在IE中每個具有style屬性的元素有一個currentStyle屬性，這個屬性是CSSStyleDeclaration的實例，包含當前元素全部計算后的樣式

<div id="test" style="font-size:20px;color:red;width:20%;"></div> <script> //IE8-瀏覽器返回undefined，IE9 瀏覽器返回'' console.log(test.currentStyle.font); //IE瀏覽器返回red console.log(test.currentStyle.color); //IE瀏覽器返回20% console.log(test.currentStyle.width); </script>

　　由以上結果看出，currentStyle屬性中的計算樣式并不會輸出集合樣式，對顏色、百分比設置不會進行相應轉換，而是原樣輸出

兼容

function getCSS(obj,style){if(window.getComputedStyle){return getComputedStyle(obj)[style];}return obj.currentStyle[style]; } <div id="test" style="width:20px;"></div> <script> function getCSS(obj,style){if(window.getComputedStyle){return getComputedStyle(obj)[style];}return obj.currentStyle[style]; } console.log(getCSS(test,'width'));//20px </script>

?

IE

　　IE9 瀏覽器的getComputedStyle()方法和IE瀏覽器的currentStyle屬性有一個特別的地方，就是可以識別自定義樣式的值，雖然無法正常渲染，但是可以取出值

<div id="test" style="a:1"></div> <script> //其他瀏覽器輸出undefined，而IE9 瀏覽器輸出1 console.log(getComputedStyle(test).a); //其他瀏覽器輸出undefined，而IE瀏覽器輸出1 console.log(test.currentStyle.a); </script>

opacity

　　雖然IE8-瀏覽器無法對opacity屬性進行正常渲染，但可以讀出opacity屬性的值。這對于opacity屬性來說無疑是一個好消息

<div id="test" style="opacity:0.5"></div> <script> function getCSS(obj,style){if(window.getComputedStyle){return getComputedStyle(obj)[style];}return obj.currentStyle[style]; } console.log(getCSS(test,'opacity'));//0.5 </script>

?

最后

　　一般地，我們通過getComputedStyle()方法或currentStyle屬性獲得元素的計算樣式，但要獲得元素精確的位置和尺寸信息，查詢元素的計算樣式并不是個好主意，因為類似padding、width等單一樣式并不直接反映元素的位置和尺寸信息，這些信息是多個樣式綜合作用的結果。所以，最好使用前面介紹過的關于元素視圖的offset、client、scroll和getBoundingClientRect()等來獲取

　　歡迎交流

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的深入理解脚本化CSS系列第二篇——查询计算样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。