setAttribute in IE6 and IE7 does not support attributes such as class/for/rowspan/colspan_javascript skills

For example, set the class attribute

Copy code The code is as follows:

el.setAttribute('class', 'abc' );

The style "abc" will not work in IE6/7, although the value "abc" can be obtained using el.getAttribute('class').

Another example is the for attribute

Copy code The code is as follows:

< label>Name:
<script> <br>var lab = document.getElementsByTagName('label')[0]; <br>lab.setAttribute('for', 'name'); <br></script>

We know that when lab sets the for attribute, clicking the label will automatically set the corresponding checkbox Selected. However, the above settings will not select the checkbox when clicked on IE6/7.

A similar situation occurs with cellspacing/cellpadding. The summary is as follows:
class
for
cellspacing
cellpadding
tabindex
readonly
maxlength
rowspan
colspan
usemap
frameborder
contenteditable
Therefore, when writing a common cross-browser interface method for setting element attributes, you need to consider the particularities of the above attributes in IE6/7. As follows

Copy the code The code is as follows:

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 of all, standard browsers directly use the original attribute names; secondly, IE6/7 attributes that are not listed above still use the original attribute names; Finally, these special attributes (with the same names as JS keywords such as for, class) use fixAttr.
Okay, now you don’t need to consider className/htmlFor, just use class/for.

Copy code The code is as follows:

dom.setAttr(el, 'class', 'red ');
dom.getAttr(el, 'class');
dom.setAttr(el, 'for', 'userName');
dom.getAttr(el, 'for');