bug 242 - setAttribute doesn't always work in IE

Issue: #242
Affects: IE5, IE5.5, IE6, IE7
MSIE Feedback ID(s): 332453 (events)
332237 (type)
336253 (object, not a string)

336256 (cellpadding, cellspacing)
Partially Fixed in: IE8 Beta 2 (Still does not handle inline events and some developers have reported issues with certain style/class attributes not taking effect right away)


Description: When calling the DOM method .setAttribute( attName, attValue ); in IE, there are several circumstances where it will not work.
Setting the "name" attribute as mentioned (bug 235),(bug 240) 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( 'onbeforeunload', doSomething );
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


• acceptcharset: Use "acceptCharset"


• accesskey: Use "accessKey"


• allowtransparency: Use "allowTransparency"


• bgcolor: Use "bgColor"


• cellpadding: Use "cellPadding"


• cellspacing: Use "cellSpacing"


• checked: See note (bug 299)


• class: Use "className"


• colspan: Use "colSpan"


• defaultchecked: Use "defaultChecked"


• defaultselected: Use "defaultSelected"


• defaultvalue: Use "defaultValue"


• for: Use "htmlFor" (also note potential side issue: bug 116)


• name: None - see (bug 235),(bug 240)


• type: See note (bug 237) "type" is readonly in IE


• frameborder: Use "frameBorder"


• hspace: Use "hSpace"


• longdesc: Use "longDesc"


• maxlength: Use "maxLength"


• marginwidth: Use "marginWidth"


• marginheight: Use "marginHeight"


• noresize: Use "noResize"


• noshade: Use "noShade"


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


• readonly: Use "readOnly"


• rowspan: Use "rowSpan"


• selected: When setting multiple selected items in a "select multiple" this will fail. {bug ref#TBD}


• style: None - see (bug 245), (bug 329)


• tabindex: Use "tabIndex"


• valign: Use "vAlign"


• vspace: Use "vSpace"

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' );  
}