setAttribute is not working for 'style' attribute on IE
You need to use cssText
button.style.cssText = 'float: right;';
getAttribute
and setAttribute
are broken in Internet Explorer.
The correct syntax for what you are trying to achieve is:
button.style.cssFloat = 'right';
The correct solution to the problem is more likely to be:
button.className = 'a class that matches a pre-written CSS rule-set';
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.