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

更新時間：2010年02月19日 14:08:18 作者：

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

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

復制代碼代碼如下:

 
<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。
樣式表
所有外鏈或者內(nèi)嵌的樣式表都能通過document.styleSheets數(shù)組訪問。quirksmode.css，這個網(wǎng)站的通用樣式表保存在document.styleSheets[0]里。上面這段特別的樣式表段就保存在document.styleSheets[1]。我們就在這段代碼上進行測試。
cssRules[]和rules[]
一條規(guī)則就是一個或者多個元素的一組聲明。這里有兩種訪問規(guī)則的方法。W3C堅持使用cssRules[]，而微軟堅持rules[]。兩種方法都是用索引數(shù)字，第一條規(guī)則就是(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 

現(xiàn)在theRules就包含了所有的樣式規(guī)則。規(guī)則的數(shù)目
這是樣式表:

復制代碼代碼如下:

 
@import url("test.css"); 
p,h2,h3 { 
    padding-right: 10px; 
} 
pre.test + * { 
    margin-right: 20%; 
} 
pre.test { 
    background-color: #ffffff; 
} 

在你看來可能是4條規(guī)則：@import 然后是p,h2,h3，接著pre.test + *，最后是pre.test。然而瀏覽器可不這么看。
Safari看見的是4條規(guī)則：
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是三條而不是一條規(guī)則，而Safari則只取p。知道現(xiàn)在我才知道這是一種不正確的寫法。
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的樣式表規(guī)則了。但是W3C或者其他瀏覽器貌似不需要這樣的訪問樣式表的方法。但是所有的文檔在這個問題上都保持沉默。
這個失敗意味著你基本上沒法訪問規(guī)則了。
樣式聲明
假設我們已經(jīng)訪問了一條規(guī)則?，F(xiàn)在需要改變其中一條聲明。表達式如下：

復制代碼代碼如下:

rule.style.color = '#0000cc';

W3C的方法是：

復制代碼代碼如下:

rule.style.setProperty('color','#00cc00',null);

因為style.color簡單的多，所以我不想用這個seProperty()。
例子
打算改變pre的顏色，代碼如下：
為了保證能用，我把pre的規(guī)則寫在最后一條。很丑，但是這是唯一的辦法：

復制代碼代碼如下:

 
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
轉(zhuǎn)載請保留以下信息
作者：北玉(tw:@rehawk)

您可能感興趣的文章: