快捷導(dǎo)航

Javascript 訪問樣式表實現(xiàn)代碼

更新時間：2009年08月20日 02:08:05 作者：

Javascript訪問樣式表--又一篇好文章

再記錄一下 Javascript訪問樣式表
Javascript可以訪問網(wǎng)頁中元素的style屬性,例如:
<div id="main" style="background-color:red"></div>

通過js訪問style屬性
alert(document.getElementById("main").style.backgroundColor);

通過js改變style屬性
document.getElementById("main").style.backgroundColor="blue";

以上代碼是我們所熟悉的,但通常我們用樣式表來控制元素的外觀屬性,例如:

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

此時如果我們再使用 alert(document.getElementById("main").style.backgroundColor);

則只能獲得一個空值,所以只能通過js去訪問樣式表了.
document.styleSheets可以獲得樣式表的集合,因為瀏覽器之間有很大不同,訪問樣式表的單獨規(guī)則也不同.DOM為每一個樣式表指定一個cssRules集合,Mozilla和Safari正確實現(xiàn)了這個標準,不過可惜IE中定義這個集合為rules,因此可以使用以下代碼來獲得正確的對象:
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;

這樣就可以獲得不同瀏覽器的CSS集合了.
通過以下JS代碼來獲得樣式表中的樣式:

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

function GetCSS() 
{ 
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules; 
alert(oCssRules[0].style.backgroundColor); 
} 

styleSheets[0]表示第一個樣式表引用,oCssRules[0]表示第一個樣式規(guī)則(即#main{}的內(nèi)容),通過style屬性來訪問具體的規(guī)則.
同理,更改該樣式表規(guī)則代碼如下:

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

function SetCSS() 
{ 
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules; 
oCssRules[0].style.backgroundColor="red"; 
oCssRules[0].style.marginLeft="20px"; 
oCssRules[0].style.marginTop="20px"; 
} 

但是需要注意的是,因為很多元素有可能關(guān)聯(lián)同一個樣式表,所以改變時需要慎重.
除了元素的style對象和css規(guī)則外,每個元素還有一個最終樣式,最終樣式用來告訴我們元素最后是如何顯示在屏幕上的,也就是style和css重合計算后的樣式.IE和DOM有兩種方式來訪問此樣式,IE中通過currentStyle屬性,DOM中使用getComputedStyle()方法.
JS獲得最終樣式的方法如下:

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

function GetFinalCSS() 
{ 
var oDiv=document.getElementById("main"); 
//訪問style屬性 
alert(oDiv.style.backgroundColor); 
//IE方法 
alert(oDiv.currentStyle.backgroundColor); 
//DOM方法，第二個參數(shù)為偽元素，如:hover,first-leeter之類 
//alert(document.defaultView.getComputeStyle(oDiv,null).backgroundColor); 
} 

我經(jīng)常使用currentStyle來獲得樣式,省去了訪問樣式表的麻煩
需要注意的是currentStyle是只讀屬性,不能夠?qū)ζ滟x值,因為其是多種樣式綜合計算后的樣式規(guī)則,這點并不難理解.
對于getComputedStyle方法,可以通過document.defaultView來調(diào)用(IE和Safari不支持此方法).所以,當使用getComputedStyle方法時,最好在多個瀏覽器上進行測試.

您可能感興趣的文章: