【翻譯作品】JavaScript CSS修改學習第三章：修改樣式表

文章目錄

• 樣式表
• cssRules[]和rules[]
• 規則的數目
• 沒有關鍵字
• 樣式聲明

在這一章我打算通過直接修改頁面的樣式表而不是通過訪問元素的辦法來修改PRE的背景顏色。不幸的是，瀏覽器嚴重的不相容性讓這個代碼基本上不能使用。

請注意代碼和傳統的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].cssRuleselse 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].cssRuleselse if (document.styleSheets[1].rules)theRules = document.styleSheets[1].ruleselse return;theRules[theRules.length-1].style.backgroundColor = '#EEF0F5';}
 
 
翻譯地址：http://www.quirksmode.org/dom/changess.html