Come posso impostare correttamente la classe attr w/JavaScript su IE, FF, Chrome, ecc.?

Question

Sto usando il codice JS sotto per modificare la classe quando si fa clic su un collegamento.

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

Questo non funziona in IE ma lo fa in FF e Chrome. Quindi ho cambiato il codice in:

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

Quindi ha funzionato in IE, ma ha smesso di funzionare in FF e Chrome.

Qualcuno potrebbe aiutarmi a venire qui?

Answer 1

È possibile utilizzare in modo affidabile la proprietà className invece di setAttribute:

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

Più in generale, ci sono un paio di nomi degli attributi che diversi browser trattano in modo diverso in setAttribute: class vs className, e for vs. htmlFor. Le librerie come Prototype, jQuery e simili elimineranno queste differenze per te, sebbene (di nuovo) nella specifica situazione di class, puoi invece utilizzare la proprietà in modo affidabile.

Answer 2

Si può andare su questo in alcuni modi.

Se si desidera utilizzare setAttribute è possibile rilevare quale browser utilizza il client e quindi utilizzare class in IE e classname in Firefox.

Quanto sopra funzionerebbe ma preferirei usare un div e assegnare una nuova classe per quello.

somediv.className='gkvSprite selected' 

O come T.J. Crowder ha detto sopra. Asign via Classname direttamente.

Answer 3

Se #gifts ha una transizione temporizzata CSS3 impostata in CSS, setAttribute (e removeAttribute e altri comandi js) non riesce in alcuni browser. Il javascript deve essere posticipato fino alla transizione prima che possa modificarlo.