Setting the CSS class name on DOM elements created in JavaScript
October 2, 2006
When I’m developing in JavaScript I primarily use Firefox to display the results as it has really good tool support for debugging code and inspecting the resulting page. Every now and then I cross-check in IE 6 to make sure things are still working.
I was very surprised the other day to find that when I took all the style settings I was applying to DOM elements created in JavaScript out of the JS code and put them in a separate style sheet, that all the style formatting disappeared when viewing things in IE. It took a good half-hour of hair-pulling, google searches and referencing the dozen or so books I have available on web development before I finally stumbled across a fragment of code which pointed me in the right direction. I had been setting the class name of the new elements using:
domNode.setAttribute("class", "classname");
which works perfectly well in Firefox. However, IE seems to completely ignore this (although the DOM inspector from the IE web development toolbar showed the class apparently being set). The code I came across showed this instead:
domNode.className = "classname";
After converting my JavaScript to use this form, lo and behold my styles were correctly applied in both browsers. This is the kind of thing which I have come across a lot since starting to work with JS - it is really hard to find answers to some really basic things like this. One thing that is clear is that most of the books and other literature is approaching JavaScript from the point of view of HTML and CSS designers, not people coming from a background of software development in languges like Java, C++ and C.
Nice entry. I had the same problem until i ran into your post here. Do you have a similar solution for styles applied by id? IE doesn’t seem to apply the styles if i use,
myElement.setAttribute(’id’,'idName’);
Comment by Whiteside — October 29, 2006 @ 4:40 am
I haven’t come across that particular problem, though I am currently seeing a similar thing where I have a CSS attribute (background-color) set by id in the stylesheet and I’m assigning a new value in javascript but it does not upate in IE. Works fine in Firefox.
Comment by Doug Clinton — October 29, 2006 @ 2:13 pm
there are a lot of difference from the standard, that I have summarized in this function:
http://mykenta.blogspot.com/2006/07/standardise-ie-setattribute-part-2.html
Comment by kentaromiura — November 7, 2006 @ 2:50 pm
Holy McCrap. Thanks very much for this. Who would have figured. Much grief saved.
Comment by The Kid — November 24, 2006 @ 5:43 pm
I need some help with the Asktheseguys wordpress theme..
I can't figure out how to get the header and ad bar at the top to go all the way across the screen.. Or better yet, how I can place an ad box in the empty space at the top right.
I can usually figure this stuff out easily, but can't find anything in the CSS that will make it work..
Anyone have any ideas?
Comment by Weston — December 6, 2006 @ 9:11 pm
FYI, this post just bailed out another frustrated developer. Thanks!
Comment by Joe — February 7, 2007 @ 2:47 am
Just encountered this myself. Thanks for the write-up.
Comment by Tom — April 18, 2007 @ 4:25 pm
another developer saved from hours of pain and agony
Comment by Aaron — May 24, 2007 @ 11:33 pm
And yet another poor soul that this post has really helped. Much thanks.
Comment by Ko — September 10, 2007 @ 11:12 pm
Had same problem setting class name for a thead element i am quoting from the mozilla developer’s center it is a DOM spec thing
“Using setAttribute() to modify certain attributes, most notably value in XUL and HTML and selected in HTML, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute(’value’, val).”
http://developer.mozilla.org/en/docs/DOM:element.setAttribute
Comment by Amit T — October 2, 2007 @ 7:42 pm
So the long and the short of it is
better to object.this = ‘that’;
then to object.setAttribute(”this”,”that” );
because setAttribute does not work all the time.
Comment by Michael C — February 1, 2008 @ 12:30 am
And another programmer gets to keep what’s left of his hair for another day. I can’t believe the inconsistencies between browsers . . . wait, we are talking about M$, I almost forgot. I have spoken with some of the development team over at microsoft and they have stated that IE behaves the way it does because early in its development, microsoft implemented the standards the correct way, but added functionality to IE that had no standards at the time. Rather than go back and clean up the errant code once standards were in place, they simply did the microsoft thing, they declared their way the proper standard implementation. I doubt we will ever have a common dom to traverse amongst all the browsers out there, but we can hope, after all tomorrow is another day.
Comment by John — April 29, 2008 @ 7:24 pm