Analysis on setAttribute compatibility usage in javascript and setattribute compatibility

Analysis on setAttribute compatibility usage in javascript and setattribute compatibility

This article analyzes the setAttribute compatibility usage in javascript. We will share this with you for your reference. The details are as follows:

1: We recommend that you use node. XXXX for general attributes.
2: We recommend that you use node. getAttribute ("XXXX") for custom attributes ").
3: We recommend that you use node. getAttribute ("XXX"), such as for in label, when the target is a keyword in JS.
4: Use className instead of reserved words, such as class.

SetAttribute (string name, string value): adds a new attribute with the specified name and value, or sets an existing attribute as the specified value.

1. style issues

In setAttribute ("class", value), class is used to change the attribute "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:

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

Output: <input type = "text" name = "q" class = "bordercss">. 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:

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

2. Method attributes and other issues

For example:

The Code is as follows:

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:

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!"); }

Example:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">