Примеры JavaScript - Как узнать/изменить значение атрибута class элемента (свойство className)?

Как узнать/изменить значение атрибута class элемента (свойство className)?

Javascript может получить доступ к атрибуту class элемента через свойство "className". Однако, следует иметь ввиду, что элементу можно задать не один класс, а сразу несколько, отделённых друг от друга пробелом.

Пример: <span class="bigText greenText">...</span>, показывает, что элементу span назначено два класса (bigText и greenText) .

Ввиду вышесказанного, нельзя использовать простое присваивание, типа: elem.className = "greenText", чтобы не затереть другие возможные значения, и следует новое значение, добавить к уже имеющимся через пробел (хотя если вы уверены, что свойство className пусто, то конечно же можно использовать и простое присваивание).

var elem = document.getElementById(elemId);

elem.className += " greenText";//добавляем новый класс к элементу
elem.className.replace(/\bgreenText\b/, ' ');//удаляем класс greenText из списка классов, назначенных элементу

if (elem.className.match(/\bgreenText\b/) { ... }//проверяем назначен ли класс greenText элементу
 

Для проверки наличия класса и удаления используется регулярное выражение: /\bgreenText\b/, где \b - это специальная конструкция (метасимвол) обозначающая границу слова, т.е регулярное выражение ищет строку greenText, которая является самомтоятельным словом, а не частью другого слова (под словом понимается строка без разделителей: пробелов, знаков пунктуации и т.п.). Использование метасимвола \b здесь в самый раз, но есть одно НО, не все браузеры его понимают (например, Opera 6 и ниже). Поэтому, если нужна поддержка таких "кривых" и старых браузеров, то следует заменить регулярное выражение "/\bимя класса\b/", на менее изящное "/(^| )имя класса($| )/".

*IE4+, Gecko, Opera7+ ... понимают \b как положено.