Browser Inconsistency in Implementing setAttribute(), getAttribute(), and removeAttribute()

getAttribute()

Testing for the existence of an attribute

While getAttribute() works in N6, IE5 and Opera 5, Netscape 6 requires a different logic to verify that an attribute does not exist.

Each of the three links below uses a different logic to test for the presence of the width attribute in the div id="test1" (it's not there). If you don't have different browsers to test this on, refer to the table below to see which browser supports which logic.

id="test1"

Browser support for attribute testing logic
	WIN					MAC
TEST	Mozilla 1.1	N7	N6	IE5+	Opera 5+	N6	IE5+
document.getElementById('test1').getAttribute('width')==''	No	No	Yes	No	No	Yes	No
document.getElementById('test1').getAttribute('width')==null	Yes	Yes	No	Yes	Yes	No	Yes
document.getElementById('test1').getAttribute('width')==undefined	Yes	Yes	No	Yes	Yes	No	No

setAttribute(), getAttribute(), removeAttribute()

IE5, N6+, and Opera 5 are all supposed to support these three methods to some extent but support and application can be buggy. There's a definite lack of consistency in implementation between the browsers. Some of the general issues are:

IE5+

Very spotty implementation. 'setAttribute()' works well with a few attributes and not at all with most. Event handler attributes can be created but will not work.

Opera 5 & 6

By far, the worst of the three browsers. 'setAttribute()' failed to produce any visibly effects with the attributes tested below. 'removeAttribute()' never worked at all.

See footnote #2 at the bottom of the page for more information.

Netscape 6 & 7

Netscape 6 provides good support. In addition to the issue mentioned above, there seems to be a slight redraw problem and, occasionally, a problem getting 'removeAttribute()' to produce an effect. These problems are fixed in Netscape 7.

Mozilla 1.1

Whoa! I just downloaded the Win version of this browser and, I have to say, I'm impressed. The best implementation of the bunch.

Click on the links in the TEST column to apply that attribute to the table cell. Try clicking 'alert getAttribute()' before and after clicking 'setAttribute()' and after clicking 'removeAttribute()' to test the effectiveness of the methods.

ATTRIBUTE	TEST	Mozilla 1.1	N6+	IE5+	Opera 5+²
align	setAttribute('align','right') alert getAttribute('align') removeAttribute('align')	All 3 methods work correctly.	All 3 methods work correctly.	Win: All 3 methods work correctly. Mac: 'setAttribute()' creates the attribute but produces no effect.	Clicking the alert before 'setAttribute()' returns a value of '0'. 'setAttribute()' creates the attribute but produces no effect. Clicking the alert after 'setAttribute()' returns a value of '66'. 'removeAttribute()' does not work.
bgColor	setAttribute('bgColor','#ccccff') alert getAttribute('bgColor') removeAttribute('bgColor')	All 3 methods work correctly.	All 3 methods work correctly.	All 3 methods work correctly as long as you use bgColor, not bgcolor.	Clicking the alert before 'setAttribute()' returns a value of '-1'. 'setAttribute()' creates the attribute but produces no effect. Clicking the alert after 'setAttribute()' returns a value of '50318540'. 'removeAttribute()' does not work.
colSpan	setAttribute('colSpan','2') alert getAttribute('colSpan') removeAttribute('colSpan')	All 3 methods work correctly.	All 3 methods work correctly.	With spelling 'colspan' - No result. The alert returns a value of '1'. With spelling 'colSpan' - Mac: 'setAttribute()' works, 'removeAttribute()' does not Win IE 5.5: 'setAttribute()' works, 'removeAttribute()' changes the value back to '1' but does not correct the table. Win IE 6: All 3 methods work correctly.	Clicking the alert before 'setAttribute()' returns a value of undefined. 'setAttribute()' creates the attribute but produces no effect. Clicking the alert after 'setAttribute()' returns a value of '2'. 'removeAttribute()' does not work.
style	setAttribute('style','border:5px #f00 solid') alert getAttribute('style') removeAttribute('style')	All 3 methods work correctly.	All 3 methods work correctly.	No result. Win: The alert returns a value of '[object]'. Mac: The alert returns a value of '[object style]'.	No result. The alert returns a value of '[object CSSStyleDeclaration]'.
width	setAttribute('width','500') alert getAttribute('width') removeAttribute('width')	All 3 methods work correctly.	N6 'setAttribute()' buggy. Works but you have to resize browser to see effect. 'removeAttribute()' buggy. Works but produces no effect, even on resizing. N7 All 3 methods work correctly.	Win: All 3 methods work correctly. Mac: 'setAttribute()' creates the attribute but produces no effect.	Clicking the alert before 'setAttribute()' returns a value of undefined. 'setAttribute()' creates the attribute but produces no effect.
onmouseover	These links apply to the next row, id="mouseovertest" setAttribute('onmouseover','alert("Howdy!")') alert getAttribute('onmouseover') removeAttribute('onmouseover')	All 3 methods work correctly.	N6 'setAttribute()' works. 'removeAttribute()' removes the attribute value but the onmouseover action still works. N7 All 3 methods work correctly.	Clicking the alert before 'setAttribute()' returns a value of null. 'setAttribute()' creates the attribute but produces no effect. It will work if you use this syntax: setAttribute('onmouseover',function anonymous(){alert('Howdy!');}) ¹ getAttribute works correctly. Clicking the alert after 'removeAttribute()' returns the value to null.	No result. The alert returns a value of undefined.
id="mouseovertest"

Footnotes

1. Thanks to Christoph of Muehlacker, Germany for this solution.

2. Thanks to znt@lineone.net.NOSPAM for the following imformation on Opera:

Hello,

I saw your page about the setAttribute method[1] and read your findings with Opera 5 & 6. As you noticed, setAttribute rarely produces any visible changes to the page however the browser does, technically, have excellent support for it!

The problem is that the underlying layout engine used in Opera 4-6 is largely incapable of updating a page visually once it's been rendered. This is a *limitation* of the browser and not a bug as many people are quick to assume and it was one of the main reasons a complete rewrite was required for Opera 7 (which, like IE5+ and Mozilla, has a dynamic rendering engine).

With Opera 4-6, simple things like colours, form values, visibility and the location of positioned elements may be altered but the rest is static once it appears on the screen. What happens when you use setAttribute is that Opera updates the elements 'internally' but these changes can't filter through to the screen. If you change the zoom level the refresh usually allows these changes to take place. Hardly practical for real world use but as I said, I am just pointing out a technicality :)

It's for the same reason that using Javascript to change the (CSS) class of an element doesn't appear to work, yet if you then check the value of the class afterwards you'll find it returns the new class name.

PXL8 2004