Rumah >hujung hadapan web >tutorial js >JavaScript怎么修改HTML标签属性

JavaScript怎么修改HTML标签属性

青灯夜游
青灯夜游asal
2021-04-09 18:08:0211716semak imbas

javascript修改属性的方法:首先使用getElementById()、getElementsByName()或getElementsByTagName()获取到DOM对象;然后使用“DOM对象.属性名=值;”来修改属性即可。

JavaScript怎么修改HTML标签属性

本教程操作环境:windows7系统、ECMAScript 5版、Dell G3电脑。

HTML DOM 对象

从 JavaScript 的观点来看,网页上的每个 HTML 标签都是一个 DOM 对象,标签的属性也是 DOM 对象的属性。如:

00bf1c0173205a6f532f4121ec432602

从 JavaScript 的观点来看,这个 a1f02c36ba31691bcfe87b2722de723b 标签是一个 Image 对象,它是 DOM 对象的一种。它的 id、src、width、border 属性的值已经指定,其它属性采用默认值。

利用 JavaScript 程序可以访问 DOM 对象,实际上就是用程序访问一个 HTML 标签。你可以通过编程修改一个 DOM 对象的属性,也就是用程序修改一个 HTML 标签的属性,使标签变得可控。

DOM 对象的属性通常与相应的 HTML 标签的属性相对应,名字通常也是相同的,但 DOM 对象的属性需区分大小写。比如 border 属性可以用在 a1f02c36ba31691bcfe87b2722de723bf5d188ed2c074f8b944552db028f98a1 等几种标签中,则对应的 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高级教程

Atas ialah kandungan terperinci JavaScript怎么修改HTML标签属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn