Javascript difference between IE and Firefox

Question

Hello

I have the following lines of Javascript:

 var button = document.getElementById("scriptsubmit");
 button.setAttribute("class", "remove");

In Firefox this works perfectly and in Internet explorer it doesn't.

I am aware that Internet Explorer expects class to be className, but I'm uncertain how to detect which to use as object detection doesn't appear to apply in this case.

Thanks for your replies

Answer 1

You can just use the className property directly in both browsers:

var button = document.getElementById("scriptsubmit");
button.className = "remove";

Answer 2

Both browsers support className, so there's no need to detect anything.

Answer 3

According to these tests, setAttribute() is not fully supported in IE: http://www.quirksmode.org/dom/w3c_core.html#t1110

One way to get around this is to create a new HTML element, set it's properties, then replace the button with it, like so:

var newButton=document.createElement("button");
newButton.class="remove";

var oldButton=document.getElementById("button");
document.removeChild(oldButton);
document.appendChild(newButton);