Javascript 訪問樣式表

document.styleSheets可以獲得樣式表的集合,因為瀏覽器之間有很大不同,訪問樣式表的單獨規則也不同.DOM為每一個樣式表指 定一個cssRules集合,Mozilla和Safari正確實現了這個標準,不過可惜IE中定義這個集合為rules,因此可以使用以下代碼來獲得正 確的對象:
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
這樣就可以獲得不同瀏覽器的CSS集合了.
通過以下JS代碼來獲得樣式表中的樣式:
代碼如下:
function GetCSS()
{
var oCssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
alert(oCssRules[0].style.backgroundColor);
}

styleSheets[0]表示第一個樣式表引用,oCssRules[0]表示第一個樣式規則(即#main{}的內容),通過style屬性來訪問具體的規則.
同理,更改該樣式表規則代碼如下: 
代碼如下:
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";
}

但是需要注意的是,因為很多元素有可能關聯同一個樣式表,所以改變時需要謹慎.
除了元素的style對象和css規則外,每個元素還有一個最終樣式,最終樣式用來告訴我們元素最後是如何顯示在螢幕上的,也就是style和css重合 計算後的樣式.IE和DOM有兩種方式來訪問此樣式,IE中通過currentStyle屬性,DOM中使用getComputedStyle()方法.
JS獲得最終樣式的方法如下:
代碼如下:
function GetFinalCSS()
{
var oDiv=document.getElementById("main");
//訪問style屬性
alert(oDiv.style.backgroundColor);
//IE方法
alert(oDiv.currentStyle.backgroundColor);
//DOM方法，第二個參數為虛擬元素，如:hover,first-leeter之類
//alert(document.defaultView.getComputeStyle(oDiv,null).backgroundColor);
}

需要注意的是currentStyle是唯讀屬性,不能夠對其賦值,因為其是多種樣式綜合計算後的樣式規則,這點並不難理解.

對於getComputedStyle方法,可以通過document.defaultView來調用(IE和Safari不支援此方法).所以,當使用getComputedStyle方法時,最好在多個瀏覽器上進行測試.

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"]; 如果是擷取背景色，這種方法在firefox和IE中的傳回值還是不一樣的，IE中是返回"#ffff99"樣子的，而firefox中返回"#ee2c22 "