用javascript getComputedStyle獲取和設置style的原理
更新時間：2008年10月10日 21:55:12 作者：
這兩天用了baidu 百度空間中的彈出窗口js，感覺不錯，很強大，很好很簡單的解決了好幾個問題，界面友好度以及美化也好多了，以前都是硬邦邦window.open();
有興趣的朋友搜索"百度 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獲取和設置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解決浮點數(shù)計算不準確問題的方法分析
這篇文章主要介紹了JavaScript解決浮點數(shù)計算不準確問題的方法,結合實例形式分析了javascript浮點數(shù)運算精度誤差的原因以及相關的解決方法與具體操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了JavaScript中常見加密解密方法的實現(xiàn)，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-03-03
JavaScript函數(shù)防抖與函數(shù)節(jié)流的定義及使用詳解
這篇文章主要為大家詳細介紹一下JavaScript中函數(shù)防抖與函數(shù)節(jié)流的定義及使用，文中的示例代碼講解詳細，對我們學習JS有一定幫助，需要的可以參考一下2022-08-08
這篇文章主要介紹了js中this用法,實例分析了this指向windows、指向對象及改變this指向的相關技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了微信小程序嵌入騰訊視頻源過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了javascript設計模式之中介者模式學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript?提供了?automatic?semicolon?insertion?(ASI)自動插入分號規(guī)則,在不加分號的情況下,會自動補充分號來分隔不同語句,下面我們就來具體了解一下這一規(guī)則吧2024-01-01
這篇文章主要介紹了webpack -v報錯解決方案,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
今天小編就為大家分享一篇解決layer.prompt無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了js模塊加載方式的初級學習資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08