JavaScript動態設置CSS樣式實例分析
通過使用文檔對象模型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屬性值，我們可直接使用如下方法進行設置：
<code>HTMLElement.style.property=value;/<code>
第二種設置方法是同時對某個元素全部style樣式進行重新設置，這種情況下我們使用style.cssText屬性進行整體屬性設置，設置語法描述如下：
<code>HTMLElement.style.cssText="property1:value1;...propertyN:valueN";/<code>
2、setAttribute()方法設置CSS
setAttribute()方法也是Element對象的基本方法之一，主要用於設置指定元素的指定屬性值。如該屬性值存在則更新屬性值。在HTMLElement對象中我們可以直接使用setAttribute方法進行style屬性的值的設置。其基本語法描述如下：
<code>HTMLElement.setAttribute(name,value);/<code>
動態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樣式改變中的應用進行了語法說明與實例分析。如需完整代碼關注並私信。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回覆。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：
本文由kid編程原創，歡迎關注，帶你一起長知識！
關鍵字: 實例 HTMLElement 對象
