JavaScript怎麼修改HTML標籤屬性-js教程-PHP中文網

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

JavaScript怎麼修改HTML標籤屬性

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

HTML DOM 物件

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

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

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

DOM 物件的屬性通常與對應的 HTML 標籤的屬性相對應，名字通常也是相同的，但 DOM 物件的屬性需區分大小寫。例如 border 屬性可以用在、

等幾種標籤中，則對應的Image 物件、Table 物件等DOM 對象也擁有border 屬性，取值方法也相同。

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

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

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

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

物件的取得

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

1、用id 取得DOM 物件：

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

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

document.getElementsByTagName( tagname )

登入後複製

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

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

比较以上三种方法，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>

登入後複製

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

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

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

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

登入後複製