JavaScript怎麼修改HTML標籤屬性

javascript修改屬性的方法：先使用getElementById()、getElementsByName()或getElementsByTagName()取得到DOM物件；然後使用「DOM物件.屬性名稱=值;」來修改屬性即可。

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

HTML DOM 物件

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

173dc41b602843afb86eee56ef8f0692

#從JavaScript 的觀點來看，這個a1f02c36ba31691bcfe87b2722de723b 標籤是一個Image 對象，它是DOM 物件的一種。它的 id、src、width、border 屬性的值已經指定，它屬性採用預設值。

利用 JavaScript 程式可以存取 DOM 對象，實際上就是用程式存取一個 HTML 標籤。你可以透過程式設計修改一個 DOM 物件的屬性，也就是用程式修改一個 HTML 標籤的屬性，讓標籤變得可控。

DOM 物件的屬性通常與對應的 HTML 標籤的屬性相對應，名字通常也是相同的，但 DOM 物件的屬性需區分大小寫。例如 border 屬性可以用在a1f02c36ba31691bcfe87b2722de723b、f5d188ed2c074f8b944552db028f98a1 等幾種標籤中，則對應的Image 物件、Table 物件等DOM 對象也擁有border 屬性，取值方法也相同。

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

還有一些 DOM 屬性沒有對應的 HTML 屬性，例如 innerHTML 是一個 DOM 屬性，它代表的是一個標籤所包含的內容。利用這個屬性可以修改一個 HTML 的開始標籤和結束標籤之間的內容。但對於a1f02c36ba31691bcfe87b2722de723b 等單一標籤，它所對應的 Image 物件沒有 innerHTML 屬性。

另外，DOM 物件也提供有方法，可以在程式中呼叫。

實際上，DOM 物件不是 JavaScript 特有的對象，它是一種跨平台的對象，有很多語言都提供了對 DOM 物件的存取支援。 JavaScript 只是其中之一。

物件的取得

用JavaScript 設定或修改一個HTML 標籤的屬性時，首先要做的就是取得這個標籤所對應的DOM 物件。常用的方法有：

1、用id 取得DOM 物件：

如果一個標籤設定了id 屬性，我們可以利用id 值來存取這個標籤，它的JavaScript 程式碼程式碼為：

<span class="c2"></span>

<code>document.getElementById( id )<br/></code>

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程式碼為：

<span class="c2"></span>

document.getElementsByTagName( tagname )

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

比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个a1f02c36ba31691bcfe87b2722de723b 标签，数组中的元素按 a1f02c36ba31691bcfe87b2722de723b 标签出现的顺序排列。

比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。

设置或修改标签的属性

获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是：

<span class="c2"></span>

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>

本例可以通过按钮修改 a1f02c36ba31691bcfe87b2722de723b 标签的 border 属性的值。

首先，为了可以访问这个 a1f02c36ba31691bcfe87b2722de723b 标签，为它定义了 id="image1" 属性。

在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 JS 函数 setBorder()。

在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取a1f02c36ba31691bcfe87b2722de723b 标签对应的 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>

本例利用按钮修改 ed126914ed1419bab26abf7cf307b7b9 标签的 direction 属性的值。

ed126914ed1419bab26abf7cf307b7b9 标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。

【推荐学习：javascript高级教程】

以上是JavaScript怎麼修改HTML標籤屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！