用javascript getComputedStyle獲取和設置style的原理

2019-11-21 01:36:22

字體：大中小

來源：轉載

供稿：網友

有興趣的朋友搜索"百度 popup"就好了，已經有人給出了注釋，強大。
最有意思的是用javascript獲取和設置style

DOM標準引入了覆蓋樣式表的概念，當我們用document.getElementById("id").style.backgroundColor 獲取樣式時獲取的只是id中style屬性中設置的背景色，如果id中的style屬性中沒有設置background-color那么就會返回空，也就是說如果id用class屬性引用了一個外部樣式表，在這個外部樣式表中設置的背景色，那么不好意思document.getElementById("id").style.backgroundColor 這種寫法不好使，如果要獲取外部樣式表中的設置，需要用到window對象的getComputedStyle()方法，代碼這樣寫window.getComputedStyle(id,null).backgroundColor
但是兼容問題又來了，這么寫在firefox中好使，但在IE中不好使
兩者兼容的方式寫成
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
如果是獲取背景色，這種方法在firefox和IE中的返回值還是不一樣的，IE中是返回"#ffff99"樣子的，而firefox中返回"rgb(238, 44, 34) "
值得注意的是：window.getComputedStyle(id,null)這種方式不能設置樣式，只能獲取，要設置還得寫成類似這樣id.style.background="#EE2C21";

上一篇：javascript圖片自動縮放和垂直居中處理函數

下一篇：js之完全兼容ie與firefox的拖動層代碼[測試好用]