外部參考css屬性在Javascript裡如何擷取

標籤：

    今天做封裝一個庫的時候發現：想擷取節點的CSS屬性，如果沒有寫行內style樣式，而是通過link寫的，我們在javascript裡想要通過.style.屬性，是擷取不到的。

    在網上尋找了一下，W3C下提供了一個方法：window.getComputedStyle()可以得到節點的計算後樣式，該方法有兩個參數，第一個是要所要擷取的樣式的節點，第二個參數不知道是什麼作用，網上給出的例子都將設定成null；即是這樣調用的：window.getComputedStyle(node,null)，其傳回值為一個對象，為計算後的樣式的屬性值對的集合。

    但是IE瀏覽器中不支援該方法，不過在IE中，元素節點有一個屬性對應的也是該節點計算後的方法，例如，在IE中節點node計算後的樣式為：node.currentStyle，該屬性是一個對象，也是計算後的樣式的屬性值對的集合。為了相容性我們可以將其封裝改寫一下，提供一個統一的方法getCurrentStyle(node)

給出樣本：

// 參數node：將要擷取其計算樣式的元素節點function getCurrentStyle(node) {    var style = null;        if(window.getComputedStyle) {        style = window.getComputedStyle(node, null);    }else{        style = node.currentStyle;    }        return style;}

以下代碼是擷取其中div的display的樣式屬性值：

 1 <div id="div">div節點</div> 2  3  4 <script> 5 var div = document.getElementById("div"); 6 var style = getCurrentStyle(div); 7 var display = style["display"]; 8  9 alert(display);    // 輸出：block10 </script>

 

外部參考css屬性在Javascript裡如何擷取