外部引用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); // 輸出:block 10 </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM