首頁  >  文章  >  web前端  >  getComputedStyle與currentStyle取得樣式(style/class)_javascript技巧

getComputedStyle與currentStyle取得樣式(style/class)_javascript技巧

WBOY
WBOY原創
2016-05-16 17:40:011071瀏覽

大家都知道,用document.getElementById('element').style.xxx可以取得元素的樣式信息,可是它獲取的只是DOM元素style屬性裡的樣式規則,對於透過class屬性引用的外部樣式表,就拿不到我們要的資訊了。

DOM標準裡有個全域方法getComputedStyle,可以取得到目前物件樣式規則訊息,如:getComputedStyle(obj,null).paddingLeft,就能取得到物件的左內邊距。但是事情還沒完,萬惡的IE不支援此方法,它有自己的一個實現方式,那就是currentStyle,不同於全局方法getComputedStyle,它是作為DOM元素屬性存在的,如:obj.currentStyle.paddingLeft,在IEpaddingLeft中就取得到物件的左內邊距了,相容性的寫法如下:

複製程式碼 程式碼如下:

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

這樣,物件就能在目前的當前及FF中傳回樣式資訊了。

特別注意一點:如果要獲取當前對象的顏色信息,IE返回的是16進制的'#ffffff',而FF返回的是rgb(255,255,255)

用js的style屬性可以取得html標籤的樣式,但不能取得非行間樣式。那要怎麼用js取得css的非行間樣式呢?在IE下可以用currentStyle,而在火狐下面我們需要用到getComputedStyle。以下是一個小範例:
複製程式碼 程式碼如下:




js用currentStyle和getComputedStyle取得css樣式


head>





陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn