Альтернативой использованию отдельных CSS_стилей через свойство style явля_ ется применение значения атрибута class через свойство className любого HTML_ элемента. Динамическое изменение класса элемента может приводить к сущест_ венным изменениям стилей, применяемых к этому элементу, при этом, конечно же, предполагается, что используемый класс соответствующим образом опреде_ лен в таблице стилей. Данный прием реализован в примере 18.3, выполняющем проверку правильности заполнения формы. JavaScript_код в этом примере уста_ навливает свойство className элементов формы в значение «valid» (верно) или «invalid» (неверно) в зависимости от того, правильная ли информация была вве_ дена пользователем. В состав примера 18.2 включена простая таблица стилей, которая определяет классы "valid" и "invalid" так, чтобы с их помощью можно было изменять цвет фона элементов ввода в форме.
Главное, что необходимо помнить об HTML_атрибуте class и соответствующем ему свойстве className, – они могут содержать более одного класса. Вообще, при работе со свойством className не принято просто устанавливать или читать его значение, как если бы это свойство содержало единственное имя класса (хотя, с целью упро_ щения, именно так и делается в главе 18). Вместо этого необходимо пользовать_ ся функцией, позволяющей проверить принадлежность элемента классу, а так_ же функциями добавления классов в свойство className элемента и их удаления из свойства className. В примере 16.7 приводятся определения таких функций. Программный код прост, но в его основе лежат регулярные выражения.
Пример 16.7. Вспомогательные функции для работы со свойством className
/**
* CSSClass.js: функции для работы с CSS_классами HTML_элемента.
*
* Данный модуль определяет единственный глобальный символ с именем CSSClass.
* Этот объект содержит вспомогательные функции для работы с атрибутом class
* (свойством className) HTML_элементов. Все функции принимают два аргумента:
* элемент e, принадлежность которого к CSS_классу требуется проверить
* или изменить, и собственно CSS_класс c, принадлежность к которому проверяется,
* или который добавляется или удаляется. Если элемент e _ строка,
* он воспринимается как значение атрибута id и передается методу
* document.getElementById().
*/
var CSSClass = {}; // Создать объект пространства имен
// Возвращает true, если элемент e является членом класса, в противном случае – false. CSSClass.is = function(e, c) {
if (typeof e == "string") e = document.getElementById(e); // id элемента
16.6. Таблицы стилей
// Прежде чем выполнять поиск с помощью регулярного выражения,
// оптимизировать для пары наиболее распространенных случаев. var classes = e.className;
if
(!classes) return false;
//
Не является членом ни одного класса
if
(classes == c) return true; //
Член этого класса
// Иначе использовать регулярное выражение для поиска слова с
// \b в регулярных выражениях означает совпадение с границей слова. return e.className.search("\\b" + c + "\\b") != _1;
};
// Добавляет класс c в свойство className элемента e,
// если имя класса уже не было записано ранее. CSSClass.add = function(e, c) {
if (typeof e == "string") e = document.getElementById(e); // id элемента if (CSSClass.is(e, c)) return; // Если уже член класса _ ничего не делать
if (e.className) c = " " + c; // Добавить разделяющий пробел, если необходимо
e.className += c; // Добавить новый класс в конец
};
// Удалить все вхождения (если таковые имеются) класса c из свойства
// className элемента e
CSSClass.remove = function(e, c) {
if (typeof e == "string") e = document.getElementById(e); // id элемента
* Отыскать в className все вхождения c и заменить их "".
* \s* соответствует любому числу пробельных символов.
* "g" заставляет регулярное выражения искать все вхождения
