JavaScript如何修改HTML標簽屬性

這篇文章主要介紹了JavaScript如何修改HTML標簽屬性，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

javascript修改屬性的方法：首先使用getElementById()、getElementsByName()或getElementsByTagName()獲取到DOM對象；然后使用“DOM對象.屬性名=值;”來修改屬性即可。

本教程操作環境：windows7系統、ECMAScript 5版、Dell G3電腦。

HTML DOM 對象

從 JavaScript 的觀點來看，網頁上的每個 HTML 標簽都是一個 DOM 對象，標簽的屬性也是 DOM 對象的屬性。如：

<img id="myimg" src="./image/2.jpg" width="120" border="0" />

從 JavaScript 的觀點來看，這個 <img> 標簽是一個 Image 對象，它是 DOM 對象的一種。它的 id、src、width、border 屬性的值已經指定，其它屬性采用默認值。

利用 JavaScript 程序可以訪問 DOM 對象，實際上就是用程序訪問一個 HTML 標簽。你可以通過編程修改一個 DOM 對象的屬性，也就是用程序修改一個 HTML 標簽的屬性，使標簽變得可控。

DOM 對象的屬性通常與相應的 HTML 標簽的屬性相對應，名字通常也是相同的，但 DOM 對象的屬性需區分大小寫。比如 border 屬性可以用在 <img>、<table> 等幾種標簽中，則對應的 Image 對象、Table 對象等 DOM 對象也擁有 border 屬性，取值方法也相同。

有個別 DOM 屬性的名字和 HTML 標簽的屬性名字不同，但它們實際上是同一個屬性。比如 HTML 標簽的 class 屬性對應的 DOM 屬性是className （注意大小寫）。這是因為 class 是 JavaScript 保留字，而屬性名是不能和保留字同名的。

還有一些 DOM 屬性沒有與之對應的 HTML 屬性，比如 innerHTML 是一個 DOM 屬性，它代表的是一個標簽所包含的內容。利用這個屬性可以修改一個 HTML 的開始標簽和結束標簽之間的內容。但對于<img> 等單個標簽，它所對應的 Image 對象沒有 innerHTML 屬性。

另外，DOM 對象還提供有方法，可以在程序中調用。

實際上，DOM 對象不是 JavaScript 特有的對象，它是一種跨平臺的對象，有很多語言都提供了對 DOM 對象的訪問支持。JavaScript 只是其中之一。

對象的獲取

用 JavaScript 設置或修改一個 HTML 標簽的屬性時，首先要做的是獲取這個標簽所對應的 DOM 對象。常用的方法有：

1、用 id 獲取 DOM 對象：

如果一個標簽設置了 id 屬性，我們可以利用 id 值訪問這個標簽，它的 JavaScript 代碼代碼為：

document.getElementById( id )

document 是一個 BOM 對象，它代表了當前的 HTML 文檔；getElementById 是 Document 對象的一個方法；id 是網頁中某個 HTML 標簽的 id 屬性值。

document.getElementById( id ) 的返回值是一個對象型數據，也就是一個 DOM 對象。

2、用 name 獲取 DOM 對象：

如果一個標簽設置了 name 屬性，我們可以利用 name 值訪問這個標簽，它的 JavaScript 代碼代碼為：

document.getElementsByName( name )

說明：在一個網頁中，如果為標簽設置 id 屬性，則各個標簽的 id 屬性值不能相同，如果為標簽設置 name 屬性，則一個網頁中可以有多個 name 屬性值相同的標簽。

所以 document.getElementsByName( name ) 的返回值不是單一的對象，而是一個 DOM 對象數組，它包含了本頁中所有 name 值相同的那些標簽。

3、用標簽名獲取 DOM 對象：

我們可以直接用標簽名訪問指定標簽，它的JavaScript代碼代碼為：

document.getElementsByTagName( tagname )

說明：由于在一個網頁中，同一種標簽可以出現多次，所以 document.getElementsByTagName( tagname ) 的返回值也是一個 DOM 對象數組，它包含了本頁中指定種類的所有標簽。

比如：document.getElementsByTagName( "img" ) 返回的是一個 Image 對象數組，每個元素對應于網頁中的一個<img> 標簽，數組中的元素按 <img> 標簽出現的順序排列。

比較以上三種方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接訪問到網頁中一個指定的 HTML 標簽，這也是我們今后最常使用的方法。

設置或修改標簽的屬性

獲取了一個 DOM 對象之后，我們可以為該對象的屬性進行賦值，從而修改了它所對應標簽的屬性值。一般方法是：

DOM對象.屬性名 = 值;

DOM 對象的屬性名通常和HTML標簽的屬性名相同，但它要區分大小寫，所以在書寫時要特別注意。

例1：

<img id="image1" src="./image/2.jpg" border="0" /> 
 <button οnclick="setBorder(0)">border="0"</button> 
 <button οnclick="setBorder(1)">border="1"</button> 
 <button οnclick="setBorder(3)">border="3"</button> 
 <button οnclick="setBorder(8)">border="8"</button> 
 <script type="text/javascript"> 
 function setBorder( n ) 
 { 
     document.getElementById( "image1" ).border = n; 
 } 
 </script>

本例可以通過按鈕修改 <img> 標簽的 border 屬性的值。

首先，為了可以訪問這個 <img> 標簽，為它定義了 id="image1" 屬性。

在按鈕中，利用事件句柄 onclick 響應鼠標單擊事件，調用 JS 函數 setBorder()。

在 setBorder() 函數中，利用 document.getElementById( "image1" ) 方法獲取<img> 標簽對應的 Image 對象，并為它的 border 屬性設置新值。

例2：

<marquee id="Mar">歡迎光臨！</marquee> 
 <p><button οnclick="setDir()">改變方向</button></p> 
 <script type="text/javascript"> 
 var dir = "left"; 
 function setDir() 
 { 
     dir = (dir=="left") ? "right" : "left"; 
     document.getElementById( "Mar" ).direction = dir; 
 } 
 </script>

本例利用按鈕修改 <marquee> 標簽的 direction 屬性的值。

<marquee> 標簽沒有指定 direction 屬性時，其默認值為“left”。利用 JS 程序可以修改它的值。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript如何修改HTML標簽屬性”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!