JavaScript怎麼修改HTML標籤屬性
javascript修改屬性的方法：先使用getElementById()、getElementsByName()或getElementsByTagName()取得到DOM物件；然後使用「DOM物件.屬性名稱=值;」來修改屬性即可。
本教學操作環境：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 屬性可以用在 有個別 DOM 屬性的名字和 HTML 標籤的屬性名字不同，但它們實際上是同一個屬性。例如 HTML 標籤的 class 屬性對應的 DOM 屬性是className （注意大小寫）。這是因為 class 是 JavaScript 保留字，而屬性名稱是不能和保留字同名的。 還有一些 DOM 屬性沒有對應的 HTML 屬性，例如 innerHTML 是一個 DOM 屬性，它代表的是一個標籤所包含的內容。利用這個屬性可以修改一個 HTML 的開始標籤和結束標籤之間的內容。但對於 另外，DOM 物件也提供有方法，可以在程式中呼叫。 實際上，DOM 物件不是 JavaScript 特有的對象，它是一種跨平台的對象，有很多語言都提供了對 DOM 物件的存取支援。 JavaScript 只是其中之一。 物件的取得 用JavaScript 設定或修改一個HTML 標籤的屬性時，首先要做的就是取得這個標籤所對應的DOM 物件。常用的方法有： 1、用id 取得DOM 物件： 如果一個標籤設定了id 屬性，我們可以利用id 值來存取這個標籤，它的JavaScript 程式碼程式碼為： document 是一個BOM 對象，它代表了目前的HTML 文件； getElementById 是Document 物件的一個方法；id 是網頁中某個HTML 標籤的id 屬性值。 document.getElementById( id ) 的回傳值是一個物件型數據，也就是一個 DOM 物件。 2、用name 取得DOM 物件： 如果一個標籤設定了name 屬性，我們可以利用name 值存取這個標籤，它的JavaScript 程式碼為： 說明：在一個網頁中，如果為標籤設定id 屬性，則各個標籤的id 屬性值不能相同，如果為標籤設定name 屬性，則一個網頁中可以有多個name 屬性值相同的標籤。 所以document.getElementsByName( name ) 的回傳值不是單一的對象，而是一個DOM 物件數組，它包含了本頁中所有name 值相同的那些標籤。 3、用標籤名稱取得DOM 物件： 我們可以直接用標籤名稱存取指定標籤，它的JavaScript程式碼為： <span class="c2"></span> 說明：由於在一個網頁中，同一種標籤可以出現多次，所以document.getElementsByTagName( tagname ) 的傳回數值也是一個DOM 物件數組，它包含了本頁中指定種類的所有標籤。 比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个 比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。 设置或修改标签的属性 获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是： <span class="c2"></span> DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。 例1： 本例可以通过按钮修改 首先，为了可以访问这个 在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 JS 函数 setBorder()。 在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取 例2： 本例利用按钮修改 标签的 direction 属性的值。 标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。 【推荐学习：javascript高级教程】 以上是JavaScript怎麼修改HTML標籤屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！ 人工智慧驅動的應用程序，用於創建逼真的裸體照片 用於從照片中去除衣服的線上人工智慧工具。 免費脫衣圖片 AI脫衣器 使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！ 好用且免費的程式碼編輯器 中文版，非常好用 強大的PHP整合開發環境 視覺化網頁開發工具 神級程式碼編輯軟體(SublimeText3) 本教程演示瞭如何使用PHP有效地處理XML文檔。 XML（可擴展的標記語言）是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲、
等幾種標籤中，則對應的Image 物件、Table 物件等DOM 對象也擁有border 屬性，取值方法也相同。
等單一標籤，它所對應的 Image 物件沒有 innerHTML 屬性。
<span class="c2"></span><code>document.getElementById( id )<br/></code>
document.getElementsByName( name )
document.getElementsByTagName( tagname )
标签，数组中的元素按
标签出现的顺序排列。
DOM对象.属性名 = 值;
<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" 属性。
标签对应的 Image 对象，并为它的 border 属性设置新值。
<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>
熱AI工具
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
Video Face Swap
熱門文章
熱工具
記事本++7.3.1
SublimeText3漢化版
禪工作室 13.0.1
Dreamweaver CS6
SublimeText3 Mac版
您如何在PHP中解析和處理HTML/XML？
Feb 07, 2025 am 11:57 AM
