快捷導(dǎo)航

JavaScript訪問(wèn)CSS屬性的幾種方式介紹

更新時(shí)間：2014年07月21日 17:05:10 投稿：whsnow

要通過(guò)元素訪問(wèn)樣式表，那么就應(yīng)該先確定是哪個(gè)元素。直接訪問(wèn)樣式表在該樣式塊里找相應(yīng)的樣式規(guī)則，最后在該樣式規(guī)則里找相應(yīng)的樣式

JavaScript訪問(wèn)CSS屬性的方式總體說(shuō)來(lái)有兩種：“通過(guò)元素訪問(wèn)”、“直接訪問(wèn)樣式表”。另外訪問(wèn)樣式的時(shí)候有一個(gè)不可忽略的問(wèn)題——運(yùn)行時(shí)樣式。

1.通過(guò)元素訪問(wèn)

既然是要通過(guò)元素訪問(wèn)樣式表，那么就應(yīng)該先確定是哪個(gè)元素。這是DOM的內(nèi)容，在此先不多說(shuō)。獲取引用之后就可以通過(guò) “引用.style.要訪問(wèn)的屬性” ，來(lái)訪問(wèn)某個(gè)屬性。舉個(gè)例子，看如下代碼。

<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
</body> 
</html>

當(dāng)我們想要獲取#a的背景色的時(shí)候就可以 document.getElementById("a").style.backgroundColor;這樣就完成了訪問(wèn)，之后是要返回還是更改屬性值那就隨你便了。

2.直接訪問(wèn)樣式表

直接訪問(wèn)樣式表總的來(lái)說(shuō)就是“先找到相應(yīng)的樣式塊，然后在該樣式塊里找相應(yīng)的樣式規(guī)則，最后在該樣式規(guī)則里找相應(yīng)的樣式”。

先說(shuō)什么是樣式塊。在代碼中，CSS代碼會(huì)存在于<style></style>標(biāo)簽之間或<link>之中，一個(gè)<style></style>或<link>就是一個(gè)樣式塊。在代碼中可能從上到下依次排列著多個(gè)代碼塊，我們可以像訪問(wèn)數(shù)組元素一樣訪問(wèn)樣式塊。例如我們要訪問(wèn)樣式塊中的第一個(gè)，就可以document.styleSheets[0]

然后說(shuō)什么是樣式規(guī)則。先看如下代碼

<pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
#b{ 
height:100px; 
width:100px; 
background-color:blue; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
<div id="b"></div> 
</body> 
</html>

代碼中分別規(guī)定了#a和#b的樣式，#a的樣式的集合或#b的集合就是一個(gè)樣式規(guī)則。在這個(gè)樣式塊中，對(duì)#a的是第一個(gè)樣式規(guī)則，對(duì)#b的是第二個(gè)樣式規(guī)則。我們同樣可以像訪問(wèn)數(shù)組元素一樣訪問(wèn)樣式規(guī)則。例如我們要訪問(wèn)#b樣式規(guī)則，就可以document.styleSheets[0].cssRules[1] 當(dāng)然你可以選擇這么寫(xiě)document.styleSheet[0].rules[1]但這種寫(xiě)法不被Firefox支持。

然后我們就可以訪問(wèn)相應(yīng)的樣式了。例如我們要把#b的背景色改成綠色，就可以document.styleSheets[0].cssRules[1].style.backgroundColor="green";

3.運(yùn)行時(shí)樣式

看如下代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
color:red; 
} 
#b{ 
height:100px; 
width:100px; 
} 
</style> 
</head> 
<body> 
<div id="a"> 
<div id="b">觀察字體顏色</div> 
</div> 
</body> 
</html>

當(dāng)我們運(yùn)行alert(document.getElementById("b").style.color);的時(shí)候發(fā)現(xiàn)彈窗上什么都沒(méi)輸出，但頁(yè)面的字體顏色明明是紅色，為啥呢？這是因?yàn)槊總€(gè)元素的style對(duì)象屬性并不是即時(shí)更新的。當(dāng)我們要彈窗上輸出紅色的時(shí)候就要用運(yùn)行時(shí)樣式。window.getComputedStyle(document.getElementById("b"),null).color這樣就可以訪問(wèn)到“紅色”。訪問(wèn)運(yùn)行時(shí)樣式也有另外一種寫(xiě)法document.getElementById("b").currentStyle.color 但這種寫(xiě)法只有IE支持。