setAttribute style not working in IE

Question

Hello,

Setting the style attribute to elements is not working in IE 6/7 . But in other browsers, it works well.

The code i am using is

var box_style = 'width: 200px; background:red';

document.getElementById('box').setAttribute("style", box_style);

This works in all other browsers except IE 6/7

Am i doing anything wrong ? or is there any solution for this problem ? Please help !

Answer 1

Internet Explorer 6-7 has a broken implementation of setAttribute / getAttribute. Don't use them.

Essentially, setAttribute (for IE) looks something like this:

function (attribute, value) {
    this[attribute] = value;
}

So if there isn't a 1:1 relationship between the property name and the attribute name, it breaks.

Set your properties individually, or, and this is generally better, set className and define the styles in an external stylesheet.

Answer 2

Try changing that to

var box = document.getElementById('box');
box.style.width = '200px';
box.style.backgroundColor = 'red';

Answer 3

Alternatively you could use PrototypeJS framework (http://www.prototypejs.org), which allows you to do the following:

$('box').setStyle({
  width: '200px',
  backgroundColor : 'red'
});

Answer 4

The ultimate answer is cssText:

el.style.cssText = 'width: 200px; background:red';

The side note is

Avoid set/getAttribute everywhere you can!