How to modify HTML tag attributes in JavaScript

How to modify attributes in javascript: First use getElementById(), getElementsByName() or getElementsByTagName() to get the DOM object; then use "DOM object.Attribute name = value;" to modify the attribute.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 5, Dell G3 computer.

HTML DOM Object

From a JavaScript point of view, each HTML tag on the web page is a DOM object, and the attributes of the tag It is also a property of the DOM object. For example:

From a JavaScript perspective It seems that this tag is an Image object, which is a type of DOM object. The values ​​of its id, src, width, and border attributes have been specified, and other attributes adopt default values.

You can use JavaScript programs to access DOM objects. In fact, you use programs to access an HTML tag. You can modify the attributes of a DOM object programmatically, that is, use a program to modify the attributes of an HTML tag to make the tag controllable.

The attributes of the DOM object usually correspond to the attributes of the corresponding HTML tag, and the names are usually the same, but the attributes of the DOM object need to be case-sensitive. For example, the border attribute can be used in several tags such as ,

, etc., and the corresponding DOM objects such as Image objects and Table objects It also has the border attribute, and the value method is the same.

The names of some DOM attributes are different from the attribute names of HTML tags, but they are actually the same attribute. For example, the DOM attribute corresponding to the class attribute of the HTML tag is className (note the case). This is because class is a reserved word in JavaScript, and attribute names cannot have the same name as reserved words.

There are also some DOM attributes that do not have corresponding HTML attributes. For example, innerHTML is a DOM attribute, which represents the content contained in a tag. Use this attribute to modify the content between the opening tag and closing tag of an HTML. But for a single tag such as , its corresponding Image object does not have an innerHTML attribute.

In addition, the DOM object also provides methods that can be called in the program.

In fact, the DOM object is not a JavaScript-specific object. It is a cross-platform object. Many languages ​​​​provide support for accessing DOM objects. JavaScript is just one of them.

Obtaining objects

When using JavaScript to set or modify the attributes of an HTML tag, the first thing to do is to obtain the object corresponding to the tag. DOM object. Commonly used methods are:

1. Use id to obtain the DOM object:

If a tag has an id attribute set, we can use the id value to access the tag, and its The JavaScript code is:

<span class="c2"></span>##

<code>document.getElementById( id )<br/></code>

document is a BOM object, which represents the current HTML document; getElementById is a method of the Document object; id is the id attribute value of an HTML tag in the web page.

document.getElementById( id ) The return value is an object data, that is, a DOM object.

2. Use name to obtain the DOM object:

If a tag has the name attribute set, we can use the name value to access the tag. Its JavaScript code is:

document.getElementsByName( name )

Note: In a web page, if the id attribute is set for a label, the id attribute value of each label cannot be the same. If the name attribute is set for the label, Then there can be multiple tags with the same name attribute value in a web page.

So

document.getElementsByName( name ) The return value is not a single object, but an array of DOM objects, which contains all the tags with the same name value on this page .

3. Use the tag name to obtain the DOM object:

We can directly use the tag name to access the specified tag, and its JavaScript code is:

<span class="c2"></span>

document.getElementsByTagName( tagname )

Note: Since the same tag can appear multiple times in a web page, the return of document.getElementsByTagName(tagname) The value is also an array of DOM objects that contains all tags of the specified kind on this page.

比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个 标签，数组中的元素按 标签出现的顺序排列。

比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。

设置或修改标签的属性

获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是：

<span class="c2"></span>

DOM对象.属性名 = 值;

DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。

例1：

<img  src="/static/imghwm/default1.png"  data-src="./image/2.jpg"  class="lazy"  id="image1"  border="0" / alt="How to modify HTML tag attributes in JavaScript" > 
 <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" 属性。

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

在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取 标签对应的 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>

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

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

【推荐学习：javascript高级教程】

The above is the detailed content of How to modify HTML tag attributes in JavaScript. For more information, please follow other related articles on the PHP Chinese website!