Posted by Rob on 24 March 2005

1

This is how you do it in IE:

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

Posted by Agent EQzE on 29 March 2005

2

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

Posted by Jonesy on 31 March 2005

3

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" ;

Posted by henc on 8 April 2005

4

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.

Posted by Rob on 9 April 2005

5

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.

Posted by Sebastian Redl on 23 May 2005

6

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.