前面的話

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

?

getComputedStyle()

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

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

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

　　getComputedStyle()方法原本是window對象下的方法，后來“DOM2級樣式”增強(qiáng)了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> //下面三行代碼的結(jié)果都一樣，IE8-瀏覽器報(bào)錯(cuò)，其他瀏覽器返回'100px' console.log(document.defaultView.getComputedStyle(test).width); console.log(window.getComputedStyle(test).width); console.log(getComputedStyle(test).width); </script>

偽元素

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

　　[注意]關(guān)于偽元素的詳細(xì)內(nèi)容移步至此

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

?

注意事項(xiàng)

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

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

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

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

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

　　【3】在計(jì)算樣式中，類似百分比等相對單位會轉(zhuǎn)換為絕對值

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

?

currentStyle

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

<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>

　　由以上結(jié)果看出，currentStyle屬性中的計(jì)算樣式并不會輸出集合樣式，對顏色、百分比設(shè)置不會進(jìn)行相應(yīng)轉(zhuǎn)換，而是原樣輸出

兼容

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屬性有一個(gè)特別的地方，就是可以識別自定義樣式的值，雖然無法正常渲染，但是可以取出值

<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屬性進(jìn)行正常渲染，但可以讀出opacity屬性的值。這對于opacity屬性來說無疑是一個(gè)好消息

<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屬性獲得元素的計(jì)算樣式，但要獲得元素精確的位置和尺寸信息，查詢元素的計(jì)算樣式并不是個(gè)好主意，因?yàn)轭愃苝adding、width等單一樣式并不直接反映元素的位置和尺寸信息，這些信息是多個(gè)樣式綜合作用的結(jié)果。所以，最好使用前面介紹過的關(guān)于元素視圖的offset、client、scroll和getBoundingClientRect()等來獲取

　　歡迎交流

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。