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