用javascript getComputedStyle獲取和設(shè)置style的原理
更新時間：2008年10月10日 21:55:12 作者：
這兩天用了baidu 百度空間中的彈出窗口js，感覺不錯，很強大，很好很簡單的解決了好幾個問題，界面友好度以及美化也好多了，以前都是硬邦邦window.open();
有興趣的朋友搜索"百度 popup"就好了，已經(jīng)有人給出了注釋，強大。
最有意思的是用javascript獲取和設(shè)置style
DOM標準引入了覆蓋樣式表的概念，當我們用document.getElementById("id").style.backgroundColor 獲取樣式時 獲取的只是id中style屬性中設(shè)置的背景色，如果id中的style屬性中沒有設(shè)置background-color那么就會返回空，也就是說如果id用class屬性引用了一個外部樣式表，在這個外部樣式表中設(shè)置的背景色，那么不好意思document.getElementById("id").style.backgroundColor 這種寫法不好使，如果要獲取外部樣式表中的設(shè)置，需要用到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)這種方式不能設(shè)置樣式，只能獲取，要設(shè)置還得寫成類似這樣id.style.background="#EE2C21";
最有意思的是用javascript獲取和設(shè)置style
DOM標準引入了覆蓋樣式表的概念，當我們用document.getElementById("id").style.backgroundColor 獲取樣式時 獲取的只是id中style屬性中設(shè)置的背景色，如果id中的style屬性中沒有設(shè)置background-color那么就會返回空，也就是說如果id用class屬性引用了一個外部樣式表，在這個外部樣式表中設(shè)置的背景色，那么不好意思document.getElementById("id").style.backgroundColor 這種寫法不好使，如果要獲取外部樣式表中的設(shè)置，需要用到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)這種方式不能設(shè)置樣式，只能獲取，要設(shè)置還得寫成類似這樣id.style.background="#EE2C21";
相關(guān)文章
js小數(shù)運算出現(xiàn)多位小數(shù)如何解決
關(guān)于JavaScript小數(shù)進行加、減、乘、除出現(xiàn)多位小數(shù)問題，自己研究了一下，而且作了相關(guān)的測試，收獲不少知識點，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS判斷當前頁面是否在微信瀏覽器打開的方法,涉及JavaScript針對客戶端的相關(guān)判定技巧,非常簡單實用,需要的朋友可以參考下2015-12-12
javascript full screen 全屏顯示頁面元素的方法
要想讓頁面的某個元素全屏顯示，就像在網(wǎng)頁上看視頻的時候，可以全屏觀看一樣，該怎么實現(xiàn)呢2013-09-09
往輸入域中插入字符串(光標所在位置)，在本文將為大家介紹下使用js是如何實現(xiàn)的，感興趣的朋友可以參考下2013-09-09
JavaScript 網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序
這篇文章主要介紹了JavaScript 網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了查找頁面中所有類為test結(jié)點的方法,需要的朋友可以參考下2014-03-03
箭頭函數(shù)可以說是es6的一大亮點,使用箭頭函數(shù),可以簡化編碼過程,是代碼更加的簡潔,下面這篇文章主要給大家介紹了關(guān)于ES6中箭頭函數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
關(guān)于onchange事件在IE和FF下的表現(xiàn)及解決方法
本篇文章主要是對關(guān)于onchange事件在IE和FF下的表現(xiàn)及解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
詳解JavaScript什么情況下不建議使用箭頭函數(shù)
箭頭函數(shù)作為ES6新增的語法，在使用時不僅能使得代碼更加簡潔，而且在某些場景避免this指向問題。但是箭頭函數(shù)不是萬能的，也有自己的缺點以及不適用的場景，本文總結(jié)了JavaScript什么情況下不建議使用箭頭函數(shù)，感興趣的可以了解一下2022-06-06
這篇文章主要介紹了js 如何獲取input點選按鈕的值,需要的朋友可以參考下2014-04-04