JavaScript如何修改HTML标签属性

这篇文章主要介绍了JavaScript如何修改HTML标签属性，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联专注于企业成都营销网站建设、网站重做改版、龙南网站定制设计、自适应品牌网站建设、H5场景定制、商城建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为龙南等各大城市提供网站开发制作服务。

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 的开始标签和结束标签之间的内容。但对于 等单个标签，它所对应的 Image 对象没有 innerHTML 属性。

另外，DOM 对象还提供有方法，可以在程序中调用。

实际上，DOM 对象不是 JavaScript 特有的对象，它是一种跨平台的对象，有很多语言都提供了对 DOM 对象的访问支持。JavaScript 只是其中之一。

对象的获取

用 JavaScript 设置或修改一个 HTML 标签的属性时，首先要做的是获取这个标签所对应的 DOM 对象。常用的方法有：

1、用 id 获取 DOM 对象：

如果一个标签设置了 id 属性，我们可以利用 id 值访问这个标签，它的 JavaScript 代码代码为：

document.getElementById( id )

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：

 
 border="0" 
 border="1" 
 border="3" 
 border="8" 
  
 function setBorder( n ) 
 { 
     document.getElementById( "image1" ).border = n; 
 } 
 

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

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

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

在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取 标签对应的 Image 对象，并为它的 border 属性设置新值。

例2：

欢迎光临！ 
 
改变方向
 
  
 var dir = "left"; 
 function setDir() 
 { 
     dir = (dir=="left") ? "right" : "left"; 
     document.getElementById( "Mar" ).direction = dir; 
 } 
 

本例利用按钮修改 标签的 direction 属性的值。

标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。

感谢你能够认真阅读完这篇文章，希望小编分享的“JavaScript如何修改HTML标签属性”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

本文名称：JavaScript如何修改HTML标签属性
网页链接：http://cqcxhl.com/article/jjjgcp.html

其他资讯

• linux命令mac linux命令man和help
• 关于html5obj的信息
• linux命令中间部分 linux命令行切换桌面命令
• ios开发电量回调 iphone回电量
• 包含jquerythead的词条

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4



在线咨询



服务热线

服务热线：028-86922220



TOP