setAttribute doesn't always work in IE

now don't ask me please what does i mean by always........ :(

means some times it works and some time it don't

When calling the DOM method .setAttribute( attName, attValue ); in IE, there are several circumstances where it will not work.
Setting the "name" attribute does not work, the "colspan" & "rowspan" attributes for th and td tags does not work, the "frameborder" attribute on iframes does not work, nor the "cellpadding" or "cellspacing" attributes on table tags.

Setting any of the inline event attributes does not work either! therefore ALL of the following will not work:

obj.setAttribute( 'onblur', doSomething );
obj.setAttribute( 'onclick', doSomething );
obj.setAttribute( 'onchange', doSomething );
obj.setAttribute( 'ondblclick', doSomething );
obj.setAttribute( 'onerror', doSomething );
obj.setAttribute( 'onfocus', doSomething );
obj.setAttribute( 'onmousedown', doSomething );
obj.setAttribute( 'onmouseover', doSomething );
obj.setAttribute( 'onmouseout', doSomething );
obj.setAttribute( 'onmouseup', doSomething );
obj.setAttribute( 'onkeydown', doSomething );
obj.setAttribute( 'onkeyup', doSomething );
obj.setAttribute( 'onkeypress', doSomething );
obj.setAttribute( 'onload', doSomething );
obj.setAttribute( 'onsubmit', doSomething );
obj.setAttribute( 'onreset', doSomething );
obj.setAttribute( 'onunload', doSomething );
obj.setAttribute( 'on*', doSomething );


You also can not set the "class" attribute, nor the "for" attribute, or even the "style" attribute.

Example: ...


Known Workarounds: Well there are several, and each depends on which attribute you are trying to set. The following table indicates what you can use to workaround these bugs.



Attribute: Workaround

* class: Use "className"

* name: None

* type: "type" is readonly in IE

* cellpadding: Use "cellPadding"

* cellspacing: Use "cellSpacing"

* acceptcharset: Use "acceptCharset"

* frameborder: Use "frameBorder"

* readonly: Use "readOnly"

* maxlength: Use "maxLength"

* marginwidth: Use "marginWidth"

* marginheight: Use "marginHeight"

* noresize: Use "noResize"

* noshade: Use "noShade"

* defaultselected: Use "defaultSelected"

* defaultvalue: Use "defaultValue"

* accesskey: Use "accessKey"

* hspace: Use "hSpace"

* vspace: Use "vSpace"

* bgcolor: Use "bgColor"

* longdesc: Use "longDesc"

* colspan: Use "colSpan"

* rowspan: Use "rowSpan"

* valign: Use "vAlign"

* tabindex: Use "tabIndex"

* on*: Inline events can not be set in IE, attach event handlers instead




Example Workaround Code:


//set variable IE=true when User Agent known to be IE.
if(!IE){
obj.setAttribute( 'class', 'special' );
} else {
obj.setAttribute( 'className', 'special' );
}