javaScript 讀取和設置文檔元素的樣式屬性
更新時間:2009年04月14日 13:50:47 作者:
有時候我們需要用js設置文檔的樣式屬性,下面就是一些方法與原理分析,大家可以看下,應該就沒問題了。
首先我們先說一下樣式表屬性
1. 內(nèi)聯(lián)樣式即元素style屬性里面設置的,級別最高
2. 頁面樣式表定義即頁面<style></style>里面定義的,級別次之
3.外部鏈接樣式表文件
JavaScript獲取和設置文檔元素的css屬性:
1.獲取元素Style屬性里面設置的樣式屬性,
document.getElementById(id).style.height;
有,則返回屬性值;沒有則返回空
IE和火狐皆然,只是有的屬性值返回可能不一樣,比如像顏色火狐返回rgb,而IE是返回十六進制數(shù)字
測試代碼:
<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="點擊" onclick="getCss();" />
2.有時候我們的樣式可能有多個地方設置了,我們也不知道它到底是外部樣式表屬性起作品,還是在內(nèi)聯(lián)樣式里面起作用,所以我們就需要獲取當前頁面渲染的屬性值。這個在IE和FF里面有些不同:
示例代碼片斷:
IE:document.getElementById('aaa').currentStyle.height
FF標準:document.defaultView.getComputedStyle(aaa,null).getPropertyValue('height')
這兩個屬性是只讀的,若要改變元素樣式還得使用style,它直接寫在元素style屬性里面級別最高起作用
3.寫一個兼容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:返回值通常會帶有單位,需要使用parseInt函數(shù)提取數(shù)字,以方便后面的操作
1. 內(nèi)聯(lián)樣式即元素style屬性里面設置的,級別最高
2. 頁面樣式表定義即頁面<style></style>里面定義的,級別次之
3.外部鏈接樣式表文件
JavaScript獲取和設置文檔元素的css屬性:
1.獲取元素Style屬性里面設置的樣式屬性,
document.getElementById(id).style.height;
有,則返回屬性值;沒有則返回空
IE和火狐皆然,只是有的屬性值返回可能不一樣,比如像顏色火狐返回rgb,而IE是返回十六進制數(shù)字
測試代碼:
<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="點擊" onclick="getCss();" />
2.有時候我們的樣式可能有多個地方設置了,我們也不知道它到底是外部樣式表屬性起作品,還是在內(nèi)聯(lián)樣式里面起作用,所以我們就需要獲取當前頁面渲染的屬性值。這個在IE和FF里面有些不同:
示例代碼片斷:
IE:document.getElementById('aaa').currentStyle.height
FF標準:document.defaultView.getComputedStyle(aaa,null).getPropertyValue('height')
這兩個屬性是只讀的,若要改變元素樣式還得使用style,它直接寫在元素style屬性里面級別最高起作用
3.寫一個兼容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:返回值通常會帶有單位,需要使用parseInt函數(shù)提取數(shù)字,以方便后面的操作
相關(guān)文章
使用json來定義函數(shù),在里面可以定義多個函數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胘son來定義函數(shù),在里面可以定義多個函數(shù)的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10