快捷導(dǎo)航

javaScript 讀取和設(shè)置文檔元素的樣式屬性

更新時(shí)間：2009年04月14日 13:50:47 作者：

有時(shí)候我們需要用js設(shè)置文檔的樣式屬性，下面就是一些方法與原理分析，大家可以看下，應(yīng)該就沒(méi)問(wèn)題了。

首先我們先說(shuō)一下樣式表屬性
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;
有，則返回屬性值；沒(méi)有則返回空
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，它直接寫(xiě)在元素style屬性里面級(jí)別最高起作用
3.寫(xiě)一個(gè)兼容IE和FF的函數(shù)來(lái)調(diào)用

復(fù)制代碼代碼如下:

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ù)字，以方便后面的操作

您可能感興趣的文章: