Ajax實戰：為文檔增加樣式

到目前為止，我們已經考察了使用DOM來操作文檔的結構(一個元素如何被另 外一個元素所包含，諸如此類)。這使得我們可以有效地改造在靜態HTML中聲明 的結構。DOM還提供了另外一類方法，允許以編程方式修改元素的樣式和改造定 義在樣式表中的結構。

通過DOM操作，Web頁面上的每一個元素都可以擁有多種視覺樣式，例如位置 、高度和寬度、顏色、邊框和空白。儘管分別修改每一個屬性可以更加精細地控 制元素的外觀，但是這樣做是很單調乏味的。幸運的是，Web瀏覽器為我們所提 供的JavaScript綁定除了提供底層介面以便精確操作之外，也允許通過CSS類來 為元素設定一致的樣式。我們來逐個考察一下。

1. className屬性

CSS提供了一種簡明的方式來將預先定義的、可重用的樣式應用到文檔中。當 我們為在代碼中建立的元素設定樣式的時候，也可以通過設定DOM節點的 className屬性來利用CSS。例如，下面一行為一個節點設定了通過declared類定 義的顯示規則：

hello.className='declared';

其中hello是到一個DOM節點的引用。這提供了一種容易和緊湊的方法，來為 一個節點同時分配很多的CSS規則，並且可以通過樣式表來管理複雜的樣式。

2. style屬性

在其他一些情況下，我們想要細粒度地改變特定元素的樣式，也許僅僅是作 為已經通過CSS應用的樣式的補充。

DOM節點還包含了一個名為style的關聯陣列，其中包含了節點樣式的全部細 節。正如圖2-4所示，DOM節點的樣式中通常包含有大量的條目。鮮為人知的是， 為節點分配className也會改變style數組的值。

圖2-4 在DOM檢查器中檢查DOM節點的style屬性。大部分的值都不是由使用者顯 式設定的，而是由呈現引擎自己設定的。注意旁邊的捲軸：我們只看到了全部 已計算樣式列表的大約四分之一的內容。

style數組也可以直接操作。在為empty節點中的條目設定樣式後，我們可以 給它加一個邊框：

empty.style.border="solid green 2px";

empty.style.width="200px";

我們也可以很容易地僅僅聲明一個box類，然後通過修改className屬性來應 用樣式，但是這種方法在某些特定環境下用起來更加便捷，並且它還允許以編程 方式構造字串。例如，我們想要以像素的精度自由地改變元素的大小，如果為 此預先定義從1到800像素每個寬度的樣式，那顯然是低效和笨拙的。

使用上面的方法，我們可以建立新的DOM元素，並且為它們設定樣式。在內容 處理技術的工具箱中，還有另外一個很有用的工具，它使用一種略微不同的方法 來通過程式編寫Web頁面，這就是InnerHTML 屬性，我們通過考察這個屬性來結束 本節。