快捷導(dǎo)航

JavaScript CSS修改學(xué)習(xí)第三章修改樣式表

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

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

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

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

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

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

 
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ù)目
這是樣式表:

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

 
@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 * （注意沒有+號(hào)）
4、PRE.test
注意大寫
Mozilla和Opera 9看見4條：
0、undefined
1、p,h2,h3
2、pre.test + *
3、pre.test
注意小寫
非常棒的混亂！
1、IE認(rèn)為p,h2,h3是三條而不是一條規(guī)則，而Safari則只取p。知道現(xiàn)在我才知道這是一種不正確的寫法。
2、Mac IE把選擇器改成了pre.test *，這樣含義就非常不一樣了。非常嚴(yán)重的問題。
3、除了Safari給pre.test添加了不必要的表達(dá)式以外，這個(gè)是支持最好的了。
所以要訪問pre.test在Safari和Mozilla里需要cssRules[3]，而IE是rules[4]，早期的Mozilla是cssRules[5]。很可愛，不是么？
沒有關(guān)鍵字
所以如果使用索引值的話問題就非常嚴(yán)重。我們希望能這樣訪問：
document.styleSheets[1].cssRules['PRE.test']這樣我就能訪問pre的樣式表規(guī)則了。但是W3C或者其他瀏覽器貌似不需要這樣的訪問樣式表的方法。但是所有的文檔在這個(gè)問題上都保持沉默。
這個(gè)失敗意味著你基本上沒法訪問規(guī)則了。
樣式聲明
假設(shè)我們已經(jīng)訪問了一條規(guī)則?，F(xiàn)在需要改變其中一條聲明。表達(dá)式如下：

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

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

W3C的方法是：

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

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

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

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

 
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)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)

您可能感興趣的文章: