javascript的getComputedStyle方法獲取節點的計算后的CSS樣式

今天在做東西的時候，遇到一個問題：想獲取節點style指定的CSS屬性，如：ele.style.display屬性，如果在節點中沒有設置其style.display屬性的話則通過ele.style.display這種方式獲取的值為空字符串。

如果節點ele是一個塊狀元素的話，通過上述方式返回的display的值則應該為：block的，而其得到的值為空字符串並非我想得到的，在網上查找了了一下，瀏覽器中提供了一個方法：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的樣式屬性值：

<div id="div">div節點</div>


<script>
var div = document.getElementById("div");
var style = getCurrentStyle(div);
var display = style["display"];

alert(display);    // 輸出：block
</script>