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

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 5版、Dell G3電腦。

HTML DOM 對象

從 JavaScript 的觀點(diǎn)來看，網(wǎng)頁上的每個(gè) HTML 標(biāo)簽都是一個(gè) DOM 對象，標(biāo)簽的屬性也是 DOM 對象的屬性。如：

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

從 JavaScript 的觀點(diǎn)來看，這個(gè) <img> 標(biāo)簽是一個(gè) Image 對象，它是 DOM 對象的一種。它的 id、src、width、border 屬性的值已經(jīng)指定，其它屬性采用默認(rèn)值。

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

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

有個(gè)別 DOM 屬性的名字和 HTML 標(biāo)簽的屬性名字不同，但它們實(shí)際上是同一個(gè)屬性。比如 HTML 標(biāo)簽的 class 屬性對應(yīng)的 DOM 屬性是className （注意大小寫）。這是因?yàn)?class 是 JavaScript 保留字，而屬性名是不能和保留字同名的。

還有一些 DOM 屬性沒有與之對應(yīng)的 HTML 屬性，比如 innerHTML 是一個(gè) DOM 屬性，它代表的是一個(gè)標(biāo)簽所包含的內(nèi)容。利用這個(gè)屬性可以修改一個(gè) HTML 的開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容。但對于<img> 等單個(gè)標(biāo)簽，它所對應(yīng)的 Image 對象沒有 innerHTML 屬性。

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

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

對象的獲取

用 JavaScript 設(shè)置或修改一個(gè) HTML 標(biāo)簽的屬性時(shí)，首先要做的是獲取這個(gè)標(biāo)簽所對應(yīng)的 DOM 對象。常用的方法有：

1、用 id 獲取 DOM 對象：

如果一個(gè)標(biāo)簽設(shè)置了 id 屬性，我們可以利用 id 值訪問這個(gè)標(biāo)簽，它的 JavaScript 代碼代碼為：

document.getElementById( id )

document 是一個(gè) BOM 對象，它代表了當(dāng)前的 HTML 文檔；getElementById 是 Document 對象的一個(gè)方法；id 是網(wǎng)頁中某個(gè) HTML 標(biāo)簽的 id 屬性值。

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

2、用 name 獲取 DOM 對象：

如果一個(gè)標(biāo)簽設(shè)置了 name 屬性，我們可以利用 name 值訪問這個(gè)標(biāo)簽，它的 JavaScript 代碼代碼為：

document.getElementsByName( name )

說明：在一個(gè)網(wǎng)頁中，如果為標(biāo)簽設(shè)置 id 屬性，則各個(gè)標(biāo)簽的 id 屬性值不能相同，如果為標(biāo)簽設(shè)置 name 屬性，則一個(gè)網(wǎng)頁中可以有多個(gè) name 屬性值相同的標(biāo)簽。

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

3、用標(biāo)簽名獲取 DOM 對象：

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

document.getElementsByTagName( tagname )

說明：由于在一個(gè)網(wǎng)頁中，同一種標(biāo)簽可以出現(xiàn)多次，所以 document.getElementsByTagName( tagname ) 的返回值也是一個(gè) DOM 對象數(shù)組，它包含了本頁中指定種類的所有標(biāo)簽。

比如：document.getElementsByTagName( "img" ) 返回的是一個(gè) Image 對象數(shù)組，每個(gè)元素對應(yīng)于網(wǎng)頁中的一個(gè)<img> 標(biāo)簽，數(shù)組中的元素按 <img> 標(biāo)簽出現(xiàn)的順序排列。

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

設(shè)置或修改標(biāo)簽的屬性

獲取了一個(gè) DOM 對象之后，我們可以為該對象的屬性進(jìn)行賦值，從而修改了它所對應(yīng)標(biāo)簽的屬性值。一般方法是：

DOM對象.屬性名 = 值;

DOM 對象的屬性名通常和HTML標(biāo)簽的屬性名相同，但它要區(qū)分大小寫，所以在書寫時(shí)要特別注意。

例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> 標(biāo)簽的 border 屬性的值。

首先，為了可以訪問這個(gè) <img> 標(biāo)簽，為它定義了 id="image1" 屬性。

在按鈕中，利用事件句柄 onclick 響應(yīng)鼠標(biāo)單擊事件，調(diào)用 JS 函數(shù) setBorder()。

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

例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> 標(biāo)簽的 direction 屬性的值。

<marquee> 標(biāo)簽沒有指定 direction 屬性時(shí)，其默認(rèn)值為“l(fā)eft”。利用 JS 程序可以修改它的值。

【推薦學(xué)習(xí)：javascript高級教程】