Introduction to Attribute and setAttribute usage in Javascript

Next I will share with you a tutorial on the usage of Attribute and setAttribute in Javascript. I hope this article will help you.

First, let's talk about setAttribute. We often need to dynamically add various attributes to the Element in JavaScript. This can be achieved through setAttribute (), which involves browser compatibility issues.

The Code is as follows:	Copy code
1 setAttribute (string name, string value ):

// Add a new attribute with the specified name and value, or set an existing attribute to the specified value.

1. style issues

The Code is as follows:	Copy code
SetAttribute ("class", value)

Class refers to changing the attribute of "class", so it must be enclosed by quotation marks.
VName indicates that the style is assigned a value.
For example:

The Code is as follows:	Copy code
Var input = document. createElement ("input "); Input. setAttribute ("type", "text "); Input. setAttribute ("name", "q "); Input. setAttribute ("class", bordercss );

Output: that is, the input control has the bordercss style attribute.
Note: The class Attribute plays an important role in W3C DOM, but it still exists due to browser differences.
The setAttribute ("class", vName) statement is used to dynamically set the class attribute of an Element in firefox, but not in IE. Because the browser using the IE kernel does not know "class", you should use "className" instead ";
Similarly, firefox does not know "className ". Therefore, the common methods are both:

The Code is as follows:	Copy code
Element. setAttribute ("class", value); // for firefox Element. setAttribute ("className", value); // for IE

2. Method attributes and other issues

For example:

The Code is as follows:	Copy code
Var bar = document. getElementById ("testbt "); Bar. setAttribute ("onclick", "javascript: alert ('this is a test! ');");

Here, setAttribute is used to specify the onclick attribute of e, which is simple and easy to understand.
However, IE does not support the setAttribute function, but does not support setting certain attributes with setAttribute, such as object attributes, set attributes, and event attributes, that is to say, setting style and onclick attributes with setAttribute does not work in IE.

To achieve compatibility with various browsers, you can use the dot symbol method to set object attributes, set attributes, and event attributes of the Element.

 

The Code is as follows:	Copy code
Document. getElementById ("testbt"). className = "bordercss "; Document. getElementById ("testbt" ).style.css Text = "color: # 00f ;"; Document. getElementById ("testbt"). style. color = "# 00f "; Document. getElementById ("testbt"). onclick = function () {alert ("This is a test! ");}

Extended issues:

When an input text value is assigned to innerHTML of a div, a problem occurs when it is in firefox (this problem does not exist in IE ), value is not included in the innerHTML after the value is assigned, that is, after you enter the content in the text box,
You want

 

The Code is as follows:	Copy code
1 <input type = text name = input1 value = "aa">

When you assign a value to a div, only

 

The Code is as follows:	Copy code
1 <input type = text name = input1>

The value is always cleared here.

In this case, setAttribute takes effect. In the input field, add onkeyup = "this. setAttribute ('value', this. value) ", that is, dynamically Add the value of the input control, and then assign the text box to the div, the value will not be cleared.

Attribute can be used to obtain Attribute values, for example

The Code is as follows:	Copy code
Document. getElementById ("testbt"). Attribute ['src']. value;