通過使用文檔對象模型DOM，可以將HTML文件當做文檔對象，並按照文檔對象處理方法進行處理。主要處理形式包括設置HTML標記文本內容、設置元素屬性值及對Style樣式進行操作等。本文主要介紹使用文檔對象模型DOM所提供的Element、HTMLElement等實現對元素Style樣式進行快速設置。

DOM標準

DOM（Document Object Model）文檔對象模型是W3C提出的技術規範，該規範與瀏覽器、平台、語言無關。HTML DOM是指適用於HTML的文檔對象模型。因此在JavaScript中我們所認識的DOM應當可以理解為HTML DOM。DOM標準相關對象關係描述如下圖所示：

DOM標準概念與關係

在DOM標準對象描述中可以看出所有的對象都繼承於Node對象，Node對象是DOM文檔對象模型的核心。在JavaScript文檔對象模型中，Document對象、Element對象等都繼承於Node對象，而HTMLDocument對象與HTMLElement對象等又分別繼承於Document對象與Element對象。

Element對象提供了HTML頁面中所有的元素方法與屬性。我們可以藉助HTMLElement對象實現對HTML頁面元素進行操作與屬性值讀寫等。

HTMLElement設置CSS樣式

HTMLElement對象繼承自Element對象，因此具有其父類的基本屬性與方法。在Element對象主要提供style屬性與setAttribute()方法實現對元素樣式屬性及屬性值進行設置。兩種方法描述如下：

1、style屬性

style屬性是HTMLElement繼承自父類Element的基本屬性之一，主要用於對HTML樣式屬性進行設置或者樣式屬性值的讀取。在進行樣式屬性值設置過程中可以分為兩種方式進行設置。第一種為設置單個特定style樣式，如設置background-color屬性值，我們可直接使用如下方法進行設置：

HTMLElement.style.property=value;

第二種設置方法是同時對某個元素全部style樣式進行重新設置，這種情況下我們使用style.cssText屬性進行整體屬性設置，設置語法描述如下：

HTMLElement.style.cssText="property1:value1;...propertyN:valueN";

2、setAttribute()方法設置CSS

setAttribute()方法也是Element對象的基本方法之一，主要用於設置指定元素的指定屬性值。如該屬性值存在則更新屬性值。在HTMLElement對象中我們可以直接使用setAttribute方法進行style屬性的值的設置。其基本語法描述如下：

HTMLElement.setAttribute(name,value);

動態CSS樣式設置實例

本例主要設置實現在鼠標經過某一個DIV時，動態改變該DIV層的style樣式屬性，主要改變屬性包括背景顏色、字體大小及光標形狀等。設計原始DIV樣式效果如下圖：

原始CSS樣式

該案例原始CSS樣式實現代碼描述如下圖所示：

原始頁面實現代碼

按照實例要求我們為div層添加鼠標over事件，並編寫事件處理函數用於響應鼠標處理，具體處理需要實現style樣式變化要求。對該div添加onmouseover事件，響應函數名稱為changeStyle()。代碼描述如下：

事件處理函數

在該事件處理函數中我們傳遞了用於標識當前元素的this參數，函數在接收到該參數後能夠直接定位與當前div，並進行下一步處理。changeStyle方法描述如下：

事件處理方法1

事件處理方法1使用style.cssText方法進行了CSS樣式的動態設置，使用setAttribure方法進行樣式設置代碼如下：

事件處理方法2

通過編寫以上代碼可以實現鼠標經過DIV時，style樣式中的背景顏色、文字大小及光標樣式的動態變化，變化之後效果描述如下圖：

動態改變樣式效果

以上給出了Element、HTMLElement及DOM基本概念說明，並對HTMLElement對象style屬性與setAttribute方法在CSS樣式改變中的應用進行了語法說明與實例分析。