javascript 讀取內(nèi)聯(lián)之外的樣式(style、currentStyle、getComputedStyle區(qū)別介紹)
更新時(shí)間：2010年05月07日 18:36:16 作者：
最常用的是style屬性，在JavaScript中，通過(guò)document.getElementById(id).style.XXX就可以獲取到XXX的值，但意外的是，這樣做只能取到通過(guò)內(nèi)嵌方式設(shè)置的樣式值，即style屬性里面設(shè)置的值。
樣式表有三種方式
內(nèi)嵌樣式（inline Style） ：是寫(xiě)在Tag里面的，內(nèi)嵌樣式只對(duì)所有的Tag有效。
內(nèi)部樣式（internal Style Sheet）：是寫(xiě)在HTML的<head></head>里面的，內(nèi)部樣式只對(duì)所在的網(wǎng)頁(yè)有效。
外部樣式表（External Style Sheet）：如果很多網(wǎng)頁(yè)需要用到同樣的樣式(Styles)，將樣式(Styles)寫(xiě)在一個(gè)以.css為后綴的CSS文件里，然后在每個(gè)需要用到這些樣式(Styles)的網(wǎng)頁(yè)里引用這個(gè)CSS文件。
下面的是讀取除了內(nèi)嵌樣式之外樣式的js，只能讀不能寫(xiě)。
復(fù)制代碼 代碼如下:
var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
var width = mydiv.currentStyle['width'];
alert('ie:' + width);
} else if(window.getComputedStyle) {
var width = window.getComputedStyle(mydiv , null)['width']
alert('firefox:' + width);
}
另外在FF下還可以通過(guò)下面的方式獲取
document.defaultView.getComputedStyle(mydiv,null).width
window.getComputedStyle(mydiv , null).width
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
最常用的是style屬性，在JavaScript中，通過(guò)document.getElementById(id).style.XXX就可以獲取到XXX的值，但意外的是，這樣做只能取到通過(guò)內(nèi)嵌方式設(shè)置的樣式值，即style屬性里面設(shè)置的值。
解決方案：引入currentStyle,runtimeStyle,getComputedStyle
style 標(biāo)準(zhǔn)的樣式！可能是由style屬性指定的！
runtimeStyle 運(yùn)行時(shí)的樣式！如果與style的屬性重疊，將覆蓋style的屬性！
currentStyle 指 style 和 runtimeStyle 的結(jié)合！
通過(guò)currentStyle就可以獲取到通過(guò)內(nèi)聯(lián)或外部引用的CSS樣式的值了（僅限IE）
如：document.getElementById("test").currentStyle.top
要兼容FF，就得需要getComputedStyle 出馬了
注意:getComputedStyle是firefox中的，
currentStyle是ie中的.
比如說(shuō)
復(fù)制代碼 代碼如下:
<style>
#mydiv {
width : 300px;
}
</style>
則:
復(fù)制代碼 代碼如下:
var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
var width = mydiv.currentStyle['width'];
alert('ie:' + width);
} else if(window.getComputedStyle) {
var width = window.getComputedStyle(mydiv , null)['width'];
alert('firefox:' + width);
}
另外在FF下還可以通過(guò)下面的方式獲取
復(fù)制代碼 代碼如下:
document.defaultView.getComputedStyle(mydiv,null).width
window.getComputedStyle(mydiv , null).width
相關(guān)文章
深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this
這篇文章主要介紹了 深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this，arguments是一個(gè)類(lèi)數(shù)組結(jié)構(gòu)，它保存了調(diào)用時(shí)傳遞給函數(shù)的所有實(shí)參；this是函數(shù)執(zhí)行時(shí)的上下文對(duì)象, 這個(gè)對(duì)象有些讓人感到困惑的行為。 下面分別對(duì)他們進(jìn)行討論。,需要的朋友可以參考下2019-06-06
JavaScript中利用構(gòu)造器函數(shù)模擬類(lèi)的方法
JavaScript中沒(méi)有類(lèi)的概念，所以其在對(duì)象創(chuàng)建方面與面向?qū)ο笳Z(yǔ)言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類(lèi)的方法，文中給出了詳細(xì)的示例代碼和介紹，需要的朋友可以參考下，下面一起看看吧。2017-02-02
javascript中時(shí)區(qū)知識(shí)的整理UTC GMT問(wèn)題
這篇文章主要介紹了javascript中時(shí)區(qū)知識(shí)的整理UTC GMT問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇解決layui表格的表頭不滾動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了JS去掉字符串中所有的逗號(hào),需要的朋友可以參考下2017-10-10
微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
2008-02-02
javascript實(shí)現(xiàn)二分查找法實(shí)現(xiàn)代碼
javascript實(shí)現(xiàn)二分查找法實(shí)現(xiàn)代碼...2007-11-11
將數(shù)字轉(zhuǎn)換成大寫(xiě)的人民幣表達(dá)式的js函數(shù)
將數(shù)字轉(zhuǎn)換成大寫(xiě)的人民幣，方法有很多，本例介紹的是使用js來(lái)完成的，有需要的朋友可以參考下2014-09-09
javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02