Как я могу надежно установить класс attr w/JavaScript в IE, FF, Chrome и т.д.?

Я использую приведенный ниже JS-код, чтобы изменить класс при щелчке ссылки.

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

Это не работает в IE, но это происходит в FF и Chrome. Затем я изменил код на:

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

Затем он работал в IE, но перестал работать в FF и Chrome.

Может кто-нибудь, пожалуйста, помогите мне здесь?

Ответы

Ответ 1

Вы можете надежно использовать свойство className вместо setAttribute:

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

В более общем плане существует несколько имен атрибутов, которые разные браузеры рассматривают по-разному в setAttribute: class vs className и for vs. htmlFor. Библиотеки, такие как Prototype, jQuery, и как и сглаживание этих различий для вас, хотя (опять же) в конкретной ситуации class, вы можете надежно использовать свойство вместо этого.

Ответ 2

Вы можете обойти это несколькими способами.

Если вы хотите использовать setAttribute, вы можете определить, какой браузер он использует, а затем использовать class в IE и classname в Firefox.

Выше было бы работать, но я бы предпочел использовать div и назначить для него новый класс.

somediv.className='gkvSprite selected'

Или как T.J. Кроудер сказал выше. Asign с помощью classname.

Ответ 3

Если #gifts имеет временный переход CSS3, установленный на нем в CSS, setAttribute (и removeAttribute и другие команды js) также терпит неудачу в некоторых браузерах. Javascript должен быть задержан до тех пор, пока переход не будет выполнен, прежде чем он сможет его изменить.