Wie kann ich die Klasse zuverlässig mit JavaScript auf IE, FF, Chrome usw. einstellen?

Question

Ich verwende den folgenden JS-Code, um die Klasse zu ändern, wenn auf eine Verknüpfung geklickt wird.

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

Dies funktioniert nicht in IE, aber es funktioniert in FF und Chrome. Dann änderte ich den Code zu:

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

Dann arbeitete es in IE, aber aufgehört zu arbeiten in FF und Chrome.

Könnte mir bitte jemand hier helfen?

Answer 1

Sie können zuverlässig die className Eigenschaft statt setAttribute verwenden:

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

Generell gibt es ein paar von Attributnamen, die verschiedenen Browsern in setAttribute unterschiedlich behandeln: class vs className und for vs. htmlFor. Bibliotheken wie Prototype, jQuery und dergleichen werden diese Unterschiede für Sie glätten, obwohl (wieder) in der spezifischen Situation von class, können Sie stattdessen zuverlässig die Eigenschaft verwenden.

Answer 2

Sie können auf verschiedene Arten vorgehen.

Wenn Sie setAttribute verwenden möchten, können Sie erkennen, welchen Browser der Client verwendet, und dann class in IE und classname in Firefox verwenden.

Das obige würde funktionieren, aber ich würde lieber ein div verwenden und eine neue Klasse dafür zuweisen.

somediv.className='gkvSprite selected' 

Oder als T.J. Crowder sagte oben. Melden Sie sich direkt über Classname an.

Answer 3

Wenn für #gifts ein zeitgesteuerter CSS3-Übergang in CSS festgelegt wurde, schlägt setAttribute (und removeAttribute und andere js-Befehle) auch in einigen Browsern fehl. Das JavaScript muss verzögert werden, bis der Übergang abgeschlossen ist, bevor es geändert werden kann.