I recently discovered that Internet Explorer and Firefox don’t agree on the possibilities of assigning a CSS class to a dynamically created DOM element (created via JavaScript) using the “setAttribute” method. It took me a little time to figure out what was going on and how to fix it, so in the hopes that I can save someone else some time I decided to provide this post.
First, I should outline what I was trying to accomplish. I have a need for a web page which has completely dynamic display properties. During the use of the page many of the DOM elements will behave according to the user’s input, so I need to have each of them accessible in JavaScript. The goal is to have a page which can adjust, update and move all of its elements without ever reloading the page or any data which has already been loaded. The page is being written using .NET, JavaScript, (D)HTML and CSS.
Now, for the approach I decided to take. Since JavaScript will need to have access to all the elements anyhow, I decided the better approach would be to have a JavaScript object for each “module” that will exist in the page. This object carries some details about the object as well as a reference to a DOM object that will be associated with each module. The goal here is to keep from duplicating code, so I either write the DOM object in the HTML (and use server side logic to manage it) or I write it in JavaScript (and use the client’s memory to manage it), but not both.
My page is made up of three files, I’ve simplified them for illustrative purposes below…
My JavaScript source file, script.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | d = new Array(); d[0] = new Display("Header", "Header"); function initializeDisplays() { for (var i = 0; i < d.length; i++) { container = document.getElementById("FrameworkContainer"); d[i].dome = document.createElement("div"); d[i].dome.setAttribute("id", d[i].id); d[i].dome.setAttribute("class", "moduleBody"); d[i].dome.innerHTML = d[i].name; container.appendChild(d[i].dome); } } function Display(name, id) { this.name = name; this.id = id; } |
My CSS stylesheet, style.css:
1 2 3 | .moduleBody { color: Green; } |
And finally, my HTML file, test.html:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhmtl"> <head> <title>Test Page</title> <script type="text/javascript" src="script.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body onload="initializeDisplays();"> <div id="FrameworkContainer"></div> </body> </html> |
Now this code works fine in Firefox, the new div is loaded into the document as expected and the text is green, as expected. However, using the same code in IE provides slightly different results. The div is loaded as expected, but no styles are applied to it. The reason, is that IE doesn’t support the following line of code:
d[i].dome.setAttribute("class", "moduleBody"); |
Instead, IE demands you use the following syntax:
d[i].dome.className = "moduleBody"; |
Is it a big deal? No, not really. But it can still be very, very frustrating to find that IE has issues when applying styles to a dynamically created element which uses the consistent approach of setAttribute as a means to set a style class. You will probably find that the className property is the recommended approach in tutorials and will find that it works in most browsers, but being a stickler for consistency I tried a different approach and ended up with this article to show for it!