javaScript 讀取和設(shè)置文檔元素的樣式屬性
1. 內(nèi)聯(lián)樣式即元素style屬性里面設(shè)置的,級(jí)別最高
2. 頁(yè)面樣式表定義即頁(yè)面<style></style>里面定義的,級(jí)別次之
3.外部鏈接樣式表文件
JavaScript獲取和設(shè)置文檔元素的css屬性:
1.獲取元素Style屬性里面設(shè)置的樣式屬性,
document.getElementById(id).style.height;
有,則返回屬性值;沒有則返回空
IE和火狐皆然,只是有的屬性值返回可能不一樣,比如像顏色火狐返回rgb,而IE是返回十六進(jìn)制數(shù)字
測(cè)試代碼:
<script type="text/javascript">
function getCss(){
alert(document.getElementById("aaa").style.height);
alert(document.getElementById("aaa").style.backgroundColor);
alert(document.getElementById("aaa").style.width);
document.getElementById("aaa").style.backgroundColor = ‘#dbdbdb';
//alert(myWidth);
}
</script>
<div id="aaa" class="bbb" style="height:20px; background-color:#FF0000;">
asdfasdfas
</div>
<input type="button" value="點(diǎn)擊" onclick="getCss();" />
2.有時(shí)候我們的樣式可能有多個(gè)地方設(shè)置了,我們也不知道它到底是外部樣式表屬性起作品,還是在內(nèi)聯(lián)樣式里面起作用,所以我們就需要獲取當(dāng)前頁(yè)面渲染的屬性值。這個(gè)在IE和FF里面有些不同:
示例代碼片斷:
IE:document.getElementById('aaa').currentStyle.height
FF標(biāo)準(zhǔn):document.defaultView.getComputedStyle(aaa,null).getPropertyValue('height')
這兩個(gè)屬性是只讀的,若要改變?cè)貥邮竭€得使用style,它直接寫在元素style屬性里面級(jí)別最高起作用
3.寫一個(gè)兼容IE和FF的函數(shù)來調(diào)用
function getRealStyle(id,styleName) {
var element = document.getElementById(id);
var realStyle = null;
if (element.currentStyle)
realStyle = element.currentStyle[styleName];
else if (window.getComputedStyle)
realStyle = window.getComputedStyle(element,null)[styleName];
return realStyle;
}
調(diào)用:cur_height = parseInt(getRealStyle(CON_ID,'height'));
P.S:返回值通常會(huì)帶有單位,需要使用parseInt函數(shù)提取數(shù)字,以方便后面的操作
相關(guān)文章
微信小程序嵌入H5頁(yè)面(webview)的基本用法和父子傳參數(shù)詳細(xì)說明
微信小程序中嵌入H5頁(yè)面通常指的是在小程序中使用Web-view組件來加載外部的網(wǎng)頁(yè),下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁(yè)面(webview)的基本用法和父子傳參數(shù)的相關(guān)資料,需要的朋友可以參考下2024-08-08
js實(shí)現(xiàn)二代身份證號(hào)碼驗(yàn)證詳解
本文給大家分享一段超級(jí)全面的二代身份證號(hào)碼驗(yàn)證程序,由JS編寫而成,可以校驗(yàn)身份證的地址碼、出生日期碼、順序碼和數(shù)字校驗(yàn)碼。是身份證去偽存真的一大利器。2014-11-11
JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作
本文主要介紹了JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
用javascript實(shí)現(xiàn)無刷新更新數(shù)據(jù)的詳細(xì)步驟 asp
用javascript實(shí)現(xiàn)無刷新更新數(shù)據(jù)的詳細(xì)步驟 asp...2006-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單貪吃蛇效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03
微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
倒計(jì)時(shí)功能在項(xiàng)目開發(fā)中經(jīng)常會(huì)用到,今天小編給大家介紹下微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼,需要的朋友參考下吧2017-11-11
手把手教你實(shí)現(xiàn)一個(gè)JavaScript時(shí)間軸組件
本文主要是給大家?guī)硪粋€(gè)時(shí)間軸的組件開發(fā)教程,其主要功能就是可以拖動(dòng)時(shí)間軸來定位當(dāng)前時(shí)間,可以通過鼠標(biāo)滾輪來修改當(dāng)前時(shí)間分辨率,需要的可以參考一下2022-10-10
javascript如何讀寫本地sqlite數(shù)據(jù)庫(kù)
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫(kù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
js實(shí)現(xiàn)倒計(jì)時(shí)效果(小于10補(bǔ)零)
本文主要介分享了js實(shí)現(xiàn)倒計(jì)時(shí)效果(小于10補(bǔ)零)的實(shí)例代碼,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03

