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

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、龍南網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為龍南等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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 特有的對象，它是一種跨平臺(tái)的對象，有很多語言都提供了對 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 程序可以修改它的值。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript如何修改HTML標(biāo)簽屬性”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站欄目：JavaScript如何修改HTML標(biāo)簽屬性
轉(zhuǎn)載來源：http://jinyejixie.com/article28/jjjgcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、小程序開發(fā)、App開發(fā)、虛擬主機(jī)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)