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

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

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

l 改變元素的class或id（element.className='error'），瀏覽器將自動應用那些定義在新的class或id上的樣式；

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

l 改變整個頁面的樣式表。

大多數(shù)的CSS改變腳本，都采用修改style屬性或改變class或id的方式。document.write方法只適合用于某些特定的場合以增強頁面的可訪問性。最后，我們很少會改變整個樣式表，因為并非所有的瀏覽器都支持這樣做，而且通常你也只是想改變某些特定元素的樣式。

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

A　style屬性

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

內聯(lián)樣式

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

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

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

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

然而，當你嘗試讀取樣式時，可能遭遇問題。看這個例子：

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

p#test {

margin: 10%;

}

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

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

在下一個例子中，彈出警告框將顯示返回結果“10%”，因為margin現(xiàn)在被定義為內聯(lián)樣式：

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

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

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

破折號

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

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

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

element.style.fontSize = '120%';

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

單位

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

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

[XMLHTTP測速計，第70～73行]

function setWidth(width) {

if (width < 0) width = 0;

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

}

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

不要忘了'px'

忘記在width或height之后附加一個'px'單位是一個常見的CSS修改錯誤。

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

獲取樣式

警告　以下所述內容有瀏覽器兼容性問題。

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

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

l 它可以訪問所有樣式，不僅僅是內聯(lián)樣式，所以它匯報的是實際應用在元素上的樣式；

l 它是只讀的，你不能通過它設置樣式。

例如：

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

alert(x.currentStyle.color);

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

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

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

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

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

同以前一樣，當我們遭遇不兼容的情形時，需要一些代碼分支來滿足所有瀏覽器：

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;

}

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

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

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

簡寫樣式

警告　以下所述內容有瀏覽器兼容性問題。

不管你是通過style屬性獲得內聯(lián)樣式，還是通過剛剛討論的函數(shù)獲取其他的樣式，當你嘗試讀取簡寫樣式時，都會遇到問題。

看這個邊框（border）的定義

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

因為這是一個內聯(lián)樣式，你期望這行代碼可以工作：

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

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

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沒有給出任何邊框值。

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

rgb()

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

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

考慮下面的情形：

p {

border: 1px solid #cc0000;

}

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

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

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

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

最新評論