Introduction to the usage of setAttribute in JavaScript_Basic knowledge

setAttribute(string name, string value): Add a new attribute with a specified name and value, or set an existing attribute to a specified value.
1. Style issues
The class in setAttribute("class", value) refers to changing the attribute "class", so it needs to be quoted.
vName represents assigning a value to the style.
For example:

Copy code The code is as follows:

var input = document.createElement( "input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss) ;

When outputting: , that is, the input control has bordercss style attributes
Note: the class attribute is in W3C DOM plays a very important role, but still exists due to browser differences.
Using the setAttribute("class", vName) statement to dynamically set the class attribute of Element works in Firefox, but not in IE. Because the browser using the IE core does not recognize "class", it must use "className" instead;
Similarly, firefox does not recognize "className" either. So the common method is to use both:

Copy the code The code is as follows:

element.setAttribute ("class", value); //for firefox
element.setAttribute("className", value); //for IE

2, method attributes and other issues
For example:

Copy code The code is as follows:

var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");

Here we use setAttribute to specify the onclick attribute of e, which is simple and good understand.
But IE does not support it. It is not that IE does not support the setAttribute function, but it does not support using setAttribute to set certain attributes, such as object attributes, collection attributes, and event attributes. In other words, using setAttribute to set style and onclick attributes is It doesn't work in IE.
In order to achieve compatibility with various browsers, you can use the dot notation method to set the object properties, collection properties and event properties of Element.

Copy code The code is as follows:

document.getElementById("testbt").className = " bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f";
document.getElementById("testbt").onclick= function () { alert("This is a test!"); }