Setattribute usage in Javascript

Source: Internet
Author: User

We often need to dynamically add various attributes to the element in Javascript, which can be achieved by using setattribute (), which involves the compatibility of the browser.

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 of class, so quotation marks are required.

Vname indicates that the style is assigned a value.

For example:

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.

You can use the setattribute (class, vname) statement 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 the class, use classname instead;

Similarly, Firefox does not know classname. Therefore, the common methods are both:

Element. setattribute (class, value); // For Firefox

Element. setattribute (classname, value); // for IE


2. Method attributes and other issues

For example:

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.

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 assignment, that is, when you enter the content in the text box, you wantWhen you assign a value to a DIV, only, The value is always cleared here. </input>

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.