Home > Developer > JavaScript
Use and compatibility of setAttribute () functions in javascript, javascriptattribute
The setAttribute () function can set the object attribute. If this attribute does not exist, this attribute is created.
Syntax structure:
El. setAttribute (name, value)
Parameter List:
Parameter description
Name is required. Specifies the attribute name to be set.
Value is required. Specifies the attribute value to be set.
Code example:
<!DOCTYPE html>The above code can reset the id attribute value of the div and bring up the newly set id attribute value.
Example 2:<!DOCTYPE html>The preceding Code sets the newAttr attribute value of the div and displays this attribute value. Note that div does not have the newAttr attribute by default. At this time, the setAttribute () function will first create this attribute and assign a value to it.
The above two code instances can be successfully executed in various mainstream browsers, but this does not mean that the setAttribute () function is compatible with various browsers.
Let's look at a code example:
<!DOCTYPE html>The above Code sets the font size to 18 PX and the font color to red in the standard browser, but it does not take effect in IE6 and IE7 browsers.
However, you can still use mydiv. getAttribute ("class") to obtain the property value "textcolor ".
That is to say, in IE6 or IE7 browsers, The setAttribute () function can be used, but not all attributes are valid.
The following lists the attributes with the above problems:
1. class
2.
3. cellspacing
4. cellpadding
5. tabindex
6. readonly
7. maxlength
8. rowspan
9. colspan
10. usemap
11. frameborder
12. contenteditable
13. style
To solve the above problem, we need to write a common cross-browser interface for setting element attributes:
dom=(function(){var fixAttr={ tabindex:'tabIndex', readonly:'readOnly', 'for':'htmlFor', 'class':'className', maxlength:'maxLength', cellspacing:'cellSpacing', cellpadding:'cellPadding', rowspan:'rowSpan', colspan:'colSpan', usemap:'useMap', frameborder:'frameBorder', contenteditable:'contentEditable' }, div=document.createElement('div'); div.setAttribute('class','t'); var supportSetAttr = div.className === 't'; return { setAttr:function(el, name, val){ el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val); }, getAttr:function(el, name){ return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name)); }}})();First, the standard browser uses the original attribute name directly. Second, the attributes not listed above in IE6/7 still use the original attribute name. Finally, these special attributes use fixAttr, such as class.
Then the above Code instance can be modified to the following form:
<!DOCTYPE html>The above code can be used in all mainstream browsers. You can set the font size to 18 PX and the color to red.
For style attributes, you can use el. style. color = "xxx" for compatibility.The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
