setattribute Compatibility usage Analysis _javascript techniques in JavaScript

This article analyzes the SetAttribute compatibility usage in JavaScript. Share to everyone for your reference, specific as follows:

1: The general properties are recommended to use node. Xxxx.
2: Custom properties recommend the use of Node.getattribute ("XXXX").
3: It is recommended to use Node.getattribute ("XXX") when getting the target to be a keyword in JS, for example in label.
4: When getting the target is reserved word, such as: class, please use ClassName instead.

SetAttribute (string name, String value): Adds a new property that specifies the name and value, or sets an existing property to the specified value.

1, Style problems

The class in setattribute ("Class", value) refers to changing the attribute of "class" so that it is quoted.

VName represents the assignment of a style.

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 BORDERCSS style properties

Note: The class attribute plays an important role in the Web-consortium DOM, but it still exists because of browser variability.

Dynamically setting the class attribute of an element using setattribute ("Class", VName) statement is a good way to do it in Firefox, but not in IE. Because the browser using IE kernel does not know "class", to switch to "className";

Also, Firefox does not know "className". So the common method is both:

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:

The code is as follows:

var bar = document.getElementById ("TESTBT");
Bar.setattribute ("onclick", "Javascript:alert (' a test! ');");

Here, using setattribute to specify the onclick properties of E, simple, very good understanding.

However, IE does not support, IE does not support setattribute this function, but does not support the use of setattribute set some properties, such as Object properties, collection properties, event properties, In other words, using setattribute to set style and onclick properties is not feasible in IE.

To achieve compatibility with various browsers, you can set the element's object properties, collection properties, and event properties by using the dot notation method.

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 ">  

For more on JavaScript related content to view the site topics: "JavaScript common function Tips Summary", "JavaScript object-oriented tutorial", "JavaScript in the JSON Operation tips Summary", " JavaScript switching effects and techniques summary, "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and Skills summary", "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", JavaScript traversal algorithm and techniques summary and JavaScript mathematical Operational Usage Summary

I hope this article will help you with JavaScript programming.