JavaScript CSS修改學習第三章 修改樣式表

請注意代碼和傳統的DHTML的區別。在DHTML你通過直接修改頁面上的特定元素來改變樣式，而這裡的代碼修改的是樣式表。
在這裡查看W3C DOM-CSS的相容性列表。
定義
一個頁面總是包含一個或者幾個樣式表，一個樣式表裡麵包含一條或者幾條規則，一條規則裡有詳細的樣式聲明。這個頁面的樣式表如下：

複製代碼 代碼如下:<link rel="stylesheet" href="../quirksmode.css">
<style>
<!--
@import url("test.css");
p,h2,h3 {
padding-right: 10px;
}
pre.test + * {
margin-right: 20%;
}
pre.test {
background-color: #ffffff;
}
-->
</style>

我們的目的是修改pre.test的白色背景為#EEF0F5。
樣式表
所有外鏈或者內嵌的樣式表都能通過document.styleSheets數組訪問。quirksmode.css，這個網站的通用樣式表儲存在document.styleSheets[0]裡。上面這段特別的樣式表段就儲存在document.styleSheets[1]。我們就在這段代碼上進行測試。
cssRules[]和rules[]
一條規則就是一個或者多個元素的一組聲明。這裡有兩種訪問規則的方法。W3C堅持使用cssRules[]，而微軟堅持rules[]。兩種方法都是用索引數字，第一條規則就是(css)Rules[0]，第二條就是(css)Rules[1]等等。 複製代碼 代碼如下:var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules

現在theRules就包含了所有的樣式規則。規則的數目
這是樣式表: 複製代碼 代碼如下:@import url("test.css");
p,h2,h3 {
padding-right: 10px;
}
pre.test + * {
margin-right: 20%;
}
pre.test {
background-color: #ffffff;
}

在你看來可能是4條規則：@import 然後是p,h2,h3，接著pre.test + *，最後是pre.test。然而瀏覽器可不這麼看。
Safari看見的是4條規則：
0、undefined
1、P
2、PRE.test[CLASSS~="test"]+*
3、PRE.test[CLASSS~="test"]
注意大寫
IE7beta3看見了5條：
0、P
1、H2
2、H3
3、PRE.test + *
4、PRE.test
注意大寫
Mac IE也看見5條：
0、P
1、H2
2、H3
3、PRE.test * （注意沒有+號）
4、PRE.test
注意大寫
Mozilla和Opera 9看見4條：
0、undefined
1、p,h2,h3
2、pre.test + *
3、pre.test
注意小寫
非常棒的混亂！
1、IE認為p,h2,h3是三條而不是一條規則，而Safari則只取p。知道現在我才知道這是一種不正確的寫法。
2、Mac IE把選取器改成了pre.test *，這樣含義就非常不一樣了。非常嚴重的問題。
3、除了Safari給pre.test添加了不必要的運算式以外，這個是支援最好的了。
所以要訪問pre.test在Safari和Mozilla裡需要cssRules[3]，而IE是rules[4]，早期的Mozilla是cssRules[5]。很可愛，不是嗎？
沒有關鍵字
所以如果使用索引值的話問題就非常嚴重。我們希望能這樣訪問：
document.styleSheets[1].cssRules['PRE.test']這樣我就能訪問pre的樣式表規則了。但是W3C或者其他瀏覽器貌似不需要這樣的訪問樣式表的方法。但是所有的文檔在這個問題上都保持沉默。
這個失敗意味著你基本上沒法訪問規則了。
樣式聲明
假設我們已經訪問了一條規則。現在需要改變其中一條聲明。運算式如下： 複製代碼 代碼如下: rule.style.color = '#0000cc';

W3C的方法是： 複製代碼 代碼如下: rule.style.setProperty('color','#00cc00',null);

因為style.color簡單的多，所以我不想用這個seProperty()。
例子
打算改變pre的顏色，代碼如下：
為了保證能用，我把pre的規則寫在最後一條。很醜，但是這是唯一的辦法： 複製代碼 代碼如下:function changeIt() {
if (!document.styleSheets) return;
var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules
else return;
theRules[theRules.length-1].style.backgroundColor = '#EEF0F5';
}

翻譯地址：http://www.quirksmode.org/dom/changess.html
轉載請保留以下資訊
作者：北玉(tw:@rehawk)