事實(shí)上，7個(gè)范例腳本都用到了某種形式的CSS修改。比如，“表單驗(yàn)證”改變出錯(cuò)的表單域的樣式，“XMLHTTP速度測(cè)試計(jì)”使用動(dòng)畫(huà)（其實(shí)也就是在很短的時(shí)間內(nèi)多次改變某個(gè)樣式）來(lái)讓用戶注意到速度的數(shù)據(jù)（而且，老實(shí)講這算是有些花哨的效果）?！跋吕藛巍蓖ㄟ^(guò)改變樣式來(lái)顯示和隱藏菜單項(xiàng)。這些變化都擁有同樣的目的：把用戶的注意力吸引到這些元素上。

JavaScript有如下4種修改CSS的方式：

l 修改元素的style屬性（element.style.margin='10%'）；

l 改變?cè)氐腸lass或id（element.className='error'），瀏覽器將自動(dòng)應(yīng)用那些定義在新的class或id上的樣式；

l 向文檔中寫(xiě)入新的CSS指令（document.write('<style>.accessibility{display: none}</style>'）；

l 改變整個(gè)頁(yè)面的樣式表。

大多數(shù)的CSS改變腳本，都采用修改style屬性或改變class或id的方式。document.write方法只適合用于某些特定的場(chǎng)合以增強(qiáng)頁(yè)面的可訪問(wèn)性。最后，我們很少會(huì)改變整個(gè)樣式表，因?yàn)椴⒎撬械臑g覽器都支持這樣做，而且通常你也只是想改變某些特定元素的樣式。

不管怎么說(shuō)，我在范例腳本中使用了所有4種方法。我們將在本章中逐個(gè)研究這些方法及它們適用的場(chǎng)合。

A　style屬性

最初也是最廣為人知的修改CSS的方式就是通過(guò)所有HTML元素都擁有的style屬性，并且訪問(wèn)它們的內(nèi)聯(lián)樣式，style對(duì)象對(duì)每一個(gè)內(nèi)聯(lián)的CSS聲明都包含一個(gè)對(duì)應(yīng)的屬性。如果你想設(shè)置一個(gè)元素的CSS屬性margin，使用element.style.margin。如果你想要設(shè)置它的CSS屬性color，就使用element.style.color。JavaScript屬性總是擁有一個(gè)和CSS屬性相似的名字。

內(nèi)聯(lián)樣式

記?。篐TML元素的style屬性讓我們得以訪問(wèn)該元素的內(nèi)聯(lián)樣式。

讓我們來(lái)回顧一些CSS的理論。CSS提供4種方式來(lái)給元素定義樣式表。你可以使用內(nèi)聯(lián)樣式，即直接把你的CSS寫(xiě)在HTML標(biāo)簽的style屬性中。

<p style="margin: 10%">Text</p>

此外，你可以嵌入、鏈入或引入樣式表。不管用何種方法，因?yàn)閮?nèi)聯(lián)樣式比其他任何形式的樣式更為明確，內(nèi)聯(lián)樣式能覆蓋那些嵌入、鏈入或引入頁(yè)面的樣式表中定義的樣式。因?yàn)閟tyle屬性可以訪問(wèn)這些內(nèi)聯(lián)樣式，所以它總是能覆蓋其他的樣式。這是這種方法的巨大優(yōu)勢(shì)。

然而，當(dāng)你嘗試讀取樣式時(shí)，可能遭遇問(wèn)題?？催@個(gè)例子：

<p id="test">Text</p>

p#test {

margin: 10%;

}

alert(document.getElementById('test').style.margin);

測(cè)試段落并沒(méi)有包含任何內(nèi)聯(lián)樣式，margin: 10%是被定義在一個(gè)嵌入的（或者鏈入，或者引入的）樣式表中，而它是不可能從style屬性中讀出來(lái)的。彈出警告框顯示為空。

在下一個(gè)例子中，彈出警告框?qū)@示返回結(jié)果“10%”，因?yàn)閙argin現(xiàn)在被定義為內(nèi)聯(lián)樣式：

<p style="margin: 10%" id="test">Text</p>

alert(document.getElementById('test').style.margin);

所以，style屬性最適合于設(shè)置樣式，而要獲取它們時(shí)就沒(méi)那么有用了。后面我們會(huì)討論從嵌入頁(yè)面的、鏈入的或者引入的樣式表中獲取樣式的方法。

破折號(hào)

許多CSS屬性的名字包含一個(gè)破折號(hào)，例如font-size。然而在JavaScript中，破折號(hào)表示相減（minus），因此它不能被用在屬性名中。這將給出一個(gè)錯(cuò)誤：

element.style.font-size = '120%';

這是要求瀏覽器從element.style.font里減去（未定義的）變量size嗎？如果是= '120%'代表什么意義呢？作為替代，瀏覽器期望一個(gè)駝峰格式（camelCase）的屬性名：

element.style.fontSize = '120%';

一般規(guī)則是從CSS屬性名中移除所有的破折號(hào)，并且破折號(hào)后的字符變?yōu)榇髮?xiě)。這樣，margin-left變成了marginLeft，text-decoration變成了textDecoration，而border-left -style變成了borderLeftStyle。

單位

在JavaScript很多數(shù)值類型的值需要一個(gè)單位，就像它們?cè)贑SS中聲明時(shí)那樣。fontSize=120表示什么？120像素、還是120磅或者120%？瀏覽器可不知道這些，所以它不會(huì)做任何反應(yīng)。為了闡明你的意圖，單位是必須的。

以setWidth()函數(shù)為例，它是實(shí)現(xiàn)“XMLHTTP測(cè)速計(jì)”的動(dòng)畫(huà)效果的核心程序之一：

[XMLHTTP測(cè)速計(jì)，第70～73行]

function setWidth(width) {

if (width < 0) width = 0;

document.getElementById('meter').style.width = width + 'px';

}

該函數(shù)接手一個(gè)值，它將改變meter的寬度為這個(gè)新值。在經(jīng)過(guò)一個(gè)安全檢查以確保該值大于0之后，設(shè)置元素的style.width為這個(gè)新的寬度值。最后加上'px'，因?yàn)椴贿@樣的話，瀏覽器可能不知道如何解釋該數(shù)值，結(jié)果什么都不做。

不要忘了'px'

忘記在width或height之后附加一個(gè)'px'單位是一個(gè)常見(jiàn)的CSS修改錯(cuò)誤。

在CSS的怪癖模式（quirks mode）里，加上'px'不是必須的，因?yàn)闉g覽器遵循舊的規(guī)則，把無(wú)單位的值視為像素值。本質(zhì)上這不是一個(gè)問(wèn)題，但很多Web開(kāi)發(fā)人員因此養(yǎng)成了改變寬度或高度值后遺忘加上單位的習(xí)慣，當(dāng)他們工作在CSS嚴(yán)格模式（strict mode）下時(shí)就遭遇到了問(wèn)題。

獲取樣式

警告　以下所述內(nèi)容有瀏覽器兼容性問(wèn)題。

正如我們所看到的，style屬性不能讀取設(shè)置在嵌入、鏈入或引入頁(yè)面的樣式表中的樣式。但是因?yàn)閃eb開(kāi)發(fā)人員有時(shí)候需要讀取這些樣式，微軟和W3C都提供了訪問(wèn)非內(nèi)聯(lián)樣式的方式。微軟的解決方案只能工作在Explorer下，而W3C標(biāo)準(zhǔn)可以工作在Mozilla和Opera下。

微軟的解決方案就是currentStyle屬性，它的工作方式像極了style屬性，除了兩件事情：

l 它可以訪問(wèn)所有樣式，不僅僅是內(nèi)聯(lián)樣式，所以它匯報(bào)的是實(shí)際應(yīng)用在元素上的樣式；

l 它是只讀的，你不能通過(guò)它設(shè)置樣式。

例如：

var x = document.getElementById('test');

alert(x.currentStyle.color);

現(xiàn)在彈出對(duì)話框顯示元素當(dāng)前的color樣式，而不管它是在什么地方被定義的。

W3C的解決方案是window.getComputedStyle()方法，它以相似但語(yǔ)法更為復(fù)雜的方式工作：

var x = document.getElementById('test');

alert(window.getComputedStyle(x,null).color);

getComputedStyle()總是返回一個(gè)像素值，盡管原來(lái)的樣式可能會(huì)是50em或11%。

同以前一樣，當(dāng)我們?cè)庥霾患嫒莸那樾螘r(shí)，需要一些代碼分支來(lái)滿足所有瀏覽器：

function getRealStyle(id,styleName) {

var element = document.getElementById(id);

var realStyle = null;

if (element.currentStyle)

realStyle = element.currentStyle[styleName];

else if (window.getComputedStyle)

realStyle = window.getComputedStyle(element,null)[styleName];

return realStyle;

}

你可以使用這個(gè)函數(shù)如下：

var textDecStyle = getRealStyle('test','textDecoration');

記住getComputedStyle()將總是返回一個(gè)像素值，而currentStyle保留原來(lái)定義在CSS中的單位。

簡(jiǎn)寫(xiě)樣式

警告　以下所述內(nèi)容有瀏覽器兼容性問(wèn)題。

不管你是通過(guò)style屬性獲得內(nèi)聯(lián)樣式，還是通過(guò)剛剛討論的函數(shù)獲取其他的樣式，當(dāng)你嘗試讀取簡(jiǎn)寫(xiě)樣式時(shí)，都會(huì)遇到問(wèn)題。

看這個(gè)邊框（border）的定義

<p id="test" style="border: 1px solid #cc0000;">Text</p>

因?yàn)檫@是一個(gè)內(nèi)聯(lián)樣式，你期望這行代碼可以工作：

alert(document.getElementById('test').style.border);

不幸的是，它不能。不同瀏覽器在彈出對(duì)話框中顯示的確切的值是不一致的。

l Explorer 6給出的是 #cc0000 1px solid。

l Mozilla 1.7.12給出的是1px solid rgb(204,0,0)。

l Opera 9給出的是1px solid #cc0000。

l Safari 1.3沒(méi)有給出任何邊框值。

問(wèn)題出在border是一個(gè)簡(jiǎn)寫(xiě)形式的聲明。它暗中包括了不少于12個(gè)樣式：上（top）、左（left）、下（bottom）和右（right）邊框的寬度（width）、風(fēng)格（style）和顏色（color）。相似地，font聲明是font-size、font-family、font-weight和line-height的簡(jiǎn)寫(xiě)形式，所以它也會(huì)展現(xiàn)相似的問(wèn)題。

rgb()

注意Mozilla使用的特殊的color語(yǔ)法：rgb(204,0,0)。這是傳統(tǒng)的#cc0000的有效的替代值。你可以在CSS和JavaScript中任意選擇一個(gè)語(yǔ)法使用。

瀏覽器是如何處理這些簡(jiǎn)寫(xiě)形式的聲明呢？上面的例子似乎過(guò)于直接；你的直覺(jué)應(yīng)該是期望瀏覽器返回1px solid #cc0000，確保與內(nèi)聯(lián)樣式所定義的一致。不幸的是，簡(jiǎn)寫(xiě)形式的屬性比那還復(fù)雜的多。

考慮下面的情形：

p {

border: 1px solid #cc0000;

}

<p id="test" style="border-color: #00cc00;">Test</p>

alert(document.getElementById('test').style.borderRightColor);

所有瀏覽器都匯報(bào)正確的顏色，盡管內(nèi)聯(lián)樣式中沒(méi)有包含border-right-color而是聲明了border-color。顯然瀏覽器認(rèn)為右邊框的顏色在設(shè)置整個(gè)邊框顏色時(shí)被設(shè)置，這也是合邏輯的。

正如你看到的，瀏覽器必須為這些異常情況制定規(guī)則，而且它們已經(jīng)選擇了略有不同的方式去處理簡(jiǎn)寫(xiě)形式的聲明。在缺乏處理簡(jiǎn)寫(xiě)屬性的明確規(guī)范的情況下，很難評(píng)判哪個(gè)瀏覽器是對(duì)還是錯(cuò)。