深入理解腳本化CSS系列第二篇——查詢計算樣式 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　元素的渲染結果是多個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()等來獲取

　　歡迎交流

文章列表