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

DOM標準

DOM（Document Object Model）文檔對象模型是W3C提出的技術規范，該規范與瀏覽器、平臺、語言無關。HTML DOM是指適用于HTML的文檔對象模型。因此在JavaScript中我們所認識的DOM應當可以理解為HTML 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樣式實現代碼描述如下圖所示：

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

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

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

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

以上給出了Element、HTMLElement及DOM基本概念說明，并對HTMLElement對象style屬性與setAttribute方法在CSS樣式改變中的應用進行了語法說明與實例分析。如需完整代碼關注并私信。

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：

前端設計-JavaScript實現復選框的分組單選

本文由kid編程原創，歡迎關注，帶你一起長知識！

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

DOM標準

DOM（Document Object Model）文檔對象模型是W3C提出的技術規范，該規范與瀏覽器、平臺、語言無關。HTML DOM是指適用于HTML的文檔對象模型。因此在JavaScript中我們所認識的DOM應當可以理解為HTML 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樣式實現代碼描述如下圖所示：

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

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

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

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

以上給出了Element、HTMLElement及DOM基本概念說明，并對HTMLElement對象style屬性與setAttribute方法在CSS樣式改變中的應用進行了語法說明與實例分析。如需完整代碼關注并私信。

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：

前端設計-JavaScript實現復選框的分組單選

本文由kid編程原創，歡迎關注，帶你一起長知識！

夠把CSS樣式包含到HTML頁面中的元素有兩個。其中，<link>元素用于包含來自外部的文件，而<style>元素用于指定嵌入的樣式。與動態腳本類似，所謂動態樣式是指在頁面剛加載時不存在的樣式；動態樣式是在頁面加載完成后動態添加到頁面中的。
我們以下面這個典型的<link>元素為例：
<link rel="stylesheet" type="text/css" href="styles.css">

使用DOM代碼可以很容易地動態創建出這個元素：
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

以上代碼在所有主流瀏覽器中都可以正常運行。需要注意的是，必須將<link>元素添加到<head>而不是<body>元素，才能保證在所有瀏覽器中的行為一致。整個過程可以用以下函數來表示：
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}

調用loadStyles()函數的代碼如下所示：
loadStyles("styles.css");

加載外部樣式文件的過程是異步的，也就是加載樣式與執行JavaScript代碼的過程沒有固定的次序。一般來說，知不知道樣式已經加載完成并不重要；不過，也存在幾種利用事件來檢測這個過程是否完成的技術，這些技術將在第13章討論。
另一種定義樣式的方式是使用<style>元素來包含嵌入式CSS，如下所示：
<style type="text/css">
body {
background-color: red;
}
</style>

按照相同的邏輯，下列DOM代碼應該是有效的：
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

DynamicStyleExample01.htm
以上代碼可以在Firefox、Safari、Chrome和Opera中運行，在IE中則會報錯。IE將<style>視為一個特殊的、與<script>類似的節點，不允許訪問其子節點。事實上，IE此時拋出的錯誤與向<script>元素添加子節點時拋出的錯誤相同。解決IE中這個問題的辦法，就是訪問元素的styleSheet屬性，該屬性又有一個cssText屬性，可以接受CSS代碼（第13章將進一步討論這兩個屬性），如下面的例子所示。

var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode("body{background-color:red}"));
} catch (ex){style.styleSheet.cssText = "body{background-color:red}";}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

與動態添加嵌入式腳本類似，重寫后的代碼使用了try-catch語句來捕獲IE拋出的錯誤，然后再使用針對IE的特殊方式來設置樣式。因此，通用的解決方案如下。
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
} catch (ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}

DynamicStyleExample02.htm
調用這個函數的示例如下：
loadStyleString("body{background-color:red}");

這種方式會實時地向頁面中添加樣式，因此能夠馬上看到變化。
如果專門針對IE編寫代碼，務必小心使用styleSheet.cssText屬性。在重用同一個<style>元素并再次設置這個屬性時，有可能會導致瀏覽器崩潰。同樣，將cssText屬性設置為空字符串也可能導致瀏覽器崩潰。我們希望IE中的這個bug能夠在將來被修復。

想要了解更多Java基礎知識，可以點擊評論區鏈接和小編一起學習java吧，此視頻教程為初學者而著，零基礎入門篇！給同學們帶來全新的Java300集課程啦!java零基礎小白自學Java必備優質教程_手把手圖解學習Java，讓學習成為一種享受_嗶哩嗶哩_bilibili