setAttribute is not working for 'style' attribute on IE

Question

I'm porting a piece of JS code written for Firefox into Internet Explorer. I faced a problem of changing style of an element using setAttribute method which was working on Firefox.

button.setAttribute('style', 'float: right;'); 

I tried setting the style member of button and it didn't work either. This was the solution in case of setting onclick event handler.

button.style = 'float: right;'; 

First I wanna know the solution for the above problem and
Second are there any maintained lists for these differences between browsers ?

Answer 1

Because style itself is an object. What you want is:

button.style.setAttribute('cssFloat','right'); 

But IE doesn't support setAttribute for style objects. So use the fully cross-browser supported:

button.style.cssFloat = 'right'; 

As for reference, I always go to www.quirksmode.org . Specifically: http://www.quirksmode.org/compatibility.html . Click on all the DOM related stuff.

And finally, to set multiple attributes I usually use something like:

function setStyle(el,spec) {     for (var n in spec) {         el.style[n] = spec[n];     } } 

usage:

setStyle(button,{     cssFloat : 'right',     border : '2px solid black' }); 

Note: object.attribute = 'value' although works in all browsers may not always work for non-HTML DOM objects. For example, if your document contains embedded SVG graphics that you need to manipulate with javascript you need to use setAttribute to do it.

Answer 2

You need to use cssText

 button.style.cssText = 'float: right;';