Javascript獲取CSS屬性值方法:getComputedStyle和currentStyle
1 .對于元素的內聯CSS樣式(<div style="color:#369">hello</div>),可以直接使用element.style.color來直接獲取css屬性的值;
2. 但是對于外部定義的css樣式使用這種方式就無法獲取了,而且IE瀏覽器和其他標準瀏覽器(Firefox,Chrome,Opera,Safari)使用的方法不一樣,IE瀏覽器使用element.currentStyle,W3C標準瀏覽器使用getComputedStyle來獲取。
1. IE獲取元素外部定義的CSS屬性值: element.currentStyle
currentStyle對象返回了元素上的樣式表,但是style對象只返回通過style標簽屬性應用到元素的內嵌樣式。
因此,通過currentStyle對象獲取的樣式值可能與通過style對象獲取的樣式值不同。
例如,如果段落的color屬性值通過鏈接或嵌入樣式表設置為紅色( red ),而不是內嵌的話,對象.currentStyle.color 將返回正確的顏色,而對象style.color不能返回值。但是,如果用戶指定了 <P STYLE="color:'red'">,currentStyle和STYLE對象都將返回值 red。
currentStyle對象反映了樣式表中的樣式優先順序。在 HTML 中此順序為:
1) 內嵌樣式
2) 樣式表規則
3) HTML 標簽屬性
4) HTML 標簽的內部定義
2. W3C獲取元素外部定義的CSS屬性值: window.getComputedStyle(element, pseudoElt)
element必選,HTML元素
pseudoElt必選,獲取該元素的偽類樣式
新聞熱點
疑難解答