setAttribute does not work when used with the style attribute

Using setAttribute, you should be able to set any attribute on an element. It appears that in IE, trying to set the style attribute does not work.

Test page Workaround is not included
Reported by: Dan Nye.

Explorer 5-6 Windows, Explorer 7 | Reported on 24 March 2005.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.




Search reports by browser:

Atom RSS

Comments

(Add your own)

1 Posted by Rob on 24 March 2005 | Permalink

This is how you do it in IE:

tempEl.style.setAttribute('cssText', 'left:150px; top:150px;', 0);

2 Posted by Agent EQzE on 29 March 2005 | Permalink

This is probably because IE considers setAttribute as setting the property of the actual javascript object. By setting the style attribute on a node, IE interprets it as setting node.style, which is not the actual attribute (node.style being an array of the different css settings instead). That's also why you can't set the 'class' or 'for' attributes, because on a element object, the old method of setting class and the for attribute are node.className and node.htmlFor.

This page provides a simple method of fixing the latter two problems, and could easily be adapted to fix the style attribute to. Still, it's an annoying issue:

http://delete.me.uk/2004/09/ieproto.html

3 Posted by Jonesy on 31 March 2005 | Permalink

When you want to use the setAttribute method on non-style elements, you can just use the dot attribute syntax, e.g. this works on both IE and Mozilla:

var panel = document.createElement("div");
panel.id = "divIdName" ;

One important exception is class; in Mozilla you can do this (as you would expect) :

panel.setAttribute("class", "iWindow");

but in IE you have to do this:

panel.setAttribute("className", "iWindow");

Instead of browser sniffing and doing an if/else, I find it easier just to call both statements, since it does no harm (IE ignores the "class" setting, and Mozilla will have both a "class" and "classname" attribute defined).

oddly, or interestingly enough, the dot syntax with class fails on both IE and Mozilla, in other words, you can't do this anywhere:

panel.class = "iWindow" ;

4 Posted by henc on 8 April 2005 | Permalink

Though, I've noticed that both IE and Mozilla accepts e.className = "your_class". - So at least we have a single statement to issue that works in both browsers.

5 Posted by Rob on 9 April 2005 | Permalink

I threw together a simple tester:
http://throbs.net/web/experiments/set_cssText.html

The most compatible approach is to skip setAttribute() and directly set the cssText property.
Like so:
tempEl.style.cssText = 'left:150px; top:150px;';

This works in IE, Firefox, and Konqueror.

6 Posted by Sebastian Redl on 23 May 2005 | Permalink

The reason element.class and label.for cannot be used is simply that 'class' and 'for' are reserved words in JavaScript, and thus they had to find different names for those. They chose className and htmlFor, both of which work consistently cross-browser.

7 Posted by James Munroe on 27 July 2006 | Permalink

I've put up a page at http://www.harmonicsphere.com/cssTextTester.html that illustrates the difference between the way Mozilla (Firefox 1.5.0.4 Win) and MSIE (6 Win) handle **appending** to the style.cssText property. It's important to note that Firefox cssText ends in a semicolon whereas MSIE's cssText does not, so you need to adjust your concatenation accordingly depending on which browser is detected. Also, MSIE rearranges the style attributes within the cssText string to suit its own preferences after the concatenation, whereas Firefox does not.

Note: you can also see the margins get adjusted between the first alert and the second.

8 Posted by Highco on 2 February 2007 | Permalink

HI, i found a better solution under http://www.digitalmediaminute.com/article/1394/the-browser-dom-and-the-class-attribute
And here it is(very clever with an if clause):
element.setAttribute((document.all ? ‘className’ : ‘class’), “somename”);

9 Posted by Brendan Falkowski on 17 March 2007 | Permalink

@Jonesy
Thanks, this method worked for curing IE6's brain damage.

input.setAttribute("className", "iWindow");

I seriously wonder if the IE Team bothers making sure their own websites work in IE.

10 Posted by Tyler Waters on 10 April 2007 | Permalink

Seems that IE is structured slightly different... it won't let you set style through setAttribute, but if you use setAttribute on the style property and give the property name "cssText" it seems to work.... of course mozilla doesn't recognize the setAttribute function of the style property, so here's a simple function that can be used to set the style of an element in both IE6 & Mozilla2:

function setStyle( object, styleText ) { if( object.style.setAttribute ) { object.style.setAttribute("cssText", styleText ); } else { object.setAttribute("style", styleText ); } }

probably works in other browsers too, I just haven't tested.

11 Posted by Tyler Waters on 10 April 2007 | Permalink

Ah crap.. some more research reveals this page (#4 when searching "ie setAttribute style" on google -- as opposed to this pages #1):

http://burstproject.org/tests/testbrowser/style.html

Shows that it can be set as simply as:

function setStyle( object, styleText) {
object.style.cssText = styleText
}

Although that may not work for Safari.... I'm without a mac so I can't test it

12 Posted by Justin Wickett on 14 July 2007 | Permalink

Thank you very much Tyler Waters for your suggested fix. It worked for me in IE6/7, Firefox 2, and Safari 2. Here is a copy of my code...

var myRater = document.getElementById("starrater");
myRater.removeAttribute("style");
myRater.setAttribute("style", "width:"+value+"%;");
myRater.style.cssText = "width:"+value+"%;";

13 Posted by Baskaran on 25 March 2008 | Permalink

I was trying to set a className on a dynamically created DIV tag.

With IE 7, the setAttribute('className','')
didnt work, but el.className = '' worked.

I finally used the Yahoo DOM Object, part of the YUI Library and it was a lot cleaner IMHO, to add a className to a dynamically created element.

Tested on IE 7 and FireFox 2.0.

14 Posted by Bill on 22 May 2008 | Permalink

Is there some compelling reason to want to use setAttribute for the style attribute? It seems to me that if you want to change more than one style property, you have a design issue that would be easier solved by creating a class selector, and simply assigning it to an element, with elem.className="yourClass";
Or, if you have programmatically determined a couple style values, like for positioning, set them independently, like
elem.style.left=(x)+"px";
elem.style.top=(y)+"px";
I've never had any problems in any browsers when taking this approach.
(And, typically, I won't litter my code with duplicate literal strings. Rather, I define one variable, var px="px", and use that, like elem.style.left=(x)+px; - and remember to put numeric expressions in parens so as to not get converted to string prematurely).

15 Posted by Steve B on 26 June 2008 | Permalink

Thanks - that sorted that one out.
eParagraph.setAttribute((document.all ? 'className' : 'class'),"systemslistentry");
gets my css back in after Ajax has been busy.
Thing is, IE7 still won't play on this. Something to come back to...

16 Posted by Kor on 27 June 2008 | Permalink

var isIE=/*@cc_on!@*/false;//IE detector
var elStyle=isIE?'cssText':'style';
element.setAttribute(elStyle,'...CSS here...');