How can I reliably set the class attr wJavaScript on IE, FF, Chrome, etc.? - Stack Overflow

admin管理员组

文章数量:1287856

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

Share Improve this question Follow edited Jul 30, 2012 at 14:58 Teun Zengerink 4,39355 gold badges3232 silver badges3232 bronze badges asked Mar 22, 2010 at 7:50 AlloiAlloi 13511 gold badge33 silver badges77 bronze badges 0

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 16

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.

本文标签：