深刻理解腳本化CSS系列第二篇——查詢計算樣式

前面的話

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

 

getComputedStyle()

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

　　getComputedStyle()方法接收兩個參數：要取得計算樣式的元素和一個僞元素字符串。若是不須要僞元素信息，第二個參數能夠是null。getComputedStyle()方法返回一個CSSStyleDeclaration對象，其中包含當前元素的全部計算的樣式

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

　　getComputedStyle()方法本來是window對象下的方法，後來「DOM2級樣式」加強了document.defaultView，也提供了getComputedStyle()方法。因此getComputedStyle()方法一共有下面3種寫法

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

　　二、window.getComputedStyle(div).width

　　三、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()等來獲取

　　歡迎交流