I am using the below JS code in order to change the class when a link is clicked.

document.getElementById("gifts").setAttribute("class", "gkvSprite selected");

This is not working in IE but it does in FF and Chrome. Then I changed the code to:

document.getElementById("gifts").setAttribute("className", "gkvSprite selected");

Then it worked in IE, but stopped working in FF and Chrome.

Could someone please help me out here?

I am using the below JS code in order to change the class when a link is clicked.

document.getElementById("gifts").setAttribute("class", "gkvSprite selected");

This is not working in IE but it does in FF and Chrome. Then I changed the code to:

document.getElementById("gifts").setAttribute("className", "gkvSprite selected");

Then it worked in IE, but stopped working in FF and Chrome.

Could someone please help me out here?

• javascript
• class
• internet-explorer-7

3 Answers 3

Now that IE is well and truly gone, you can use setAttribute("class", ___) reliably.

Alternatively, you can reliably use the className property instead of setAttribute:

document.getElementById("gifts").className = "gkvSprite selected";

More generally, there are a couple of attribute names that IE (and only IE) got wrong with setAttribute: IE required className instead of class, and htmlFor instead of for. The reflected property names are className and htmlFor, but the attribute names are class and for, and setAttribute should be using the attribute names (and does, except on IE). (IIRC, IE11 fixed this, but it doesn't matter now that IE has been retired.)

You can go about this in a few ways.

If you want to use setAttribute you can detect which browser the client is using and then use class in IE and classname in Firefox.

The above would work but I would prefer using a div and assigning a new class for that.

somediv.className='gkvSprite selected'

Or as T.J. Crowder said above. Asign via Classname directily.

If #gifts has a timed CSS3 transition set on it in CSS, setAttribute (and removeAttribute, and other js commands) also fails in some browsers. The javascript must be delayed until the transition is done before it can modify it.