Функции для работы с className в javascript

Записи и примечания на тему HTML, CSS, PHP, JScript

Функции для работы с className в javascript

» » Сообщение:

Оптимизация функции для работы с className в javascript

Собственно, превью оч хорошего материала по оптимизации JS кода.
Небольшая выдержка:

Изменение атрибута class у HTML-элементов является основой, базой для управления содержимым страницы с помощью DHTML. Любое действие по оформлению проще всего производить, именно изменяя динамически свойство className: от простого добавления правила {cursor:pointer;} при подготовке таблиц к сортировке до создания сложных электронных документов.

Работа с className – одна из важнейших и наиболее частых задач DHTML, поэтому функции Javascript, выполняющие эту работу, должны быть написаны очень тщательно.

Что делать?

Какие конкретно действия можно выполнять с атрибутом class у HTML-элемента? Значение этого атрибута может состоять из нескольких слов (разделённых пробелами), каждое из которых является отдельным селектором класса для набора правил CSS:

Код: Выделить всё Развернуть
<p class='flole border'> ... что-то там ... </p>

(а в CSS может быть написано float:left; border:1px solid gray;
Значит, можно (1) добавлять к атрибуту class новые слова-селекторы; (2) удалять существующие селекторы; а иногда (например, при чередующейся раскраске строк в таблице) требуется и заменять (3) один селектор на другой.

То есть достаточно традиционный набор действий: add, remove, replace.
Чаще всего Javascript-библиотеки обходятся первыми двумя, для которых делают отдельные функции вида:

Код: Выделить всё Развернуть
function addClass(el, cls) {
 el.className += " "+cls
}
Код: Выделить всё Развернуть
function removeClass(el, cls) {
 var re = new RegExp('(\\s|^)' + cls + '(\\s|$)')
 el.className = el.className.replace(re, ' ')
}

Ну, а чтобы лишний раз не менять className (не заставлять браузер перерисовывать страницу и тормозить всю работу), в набор добавляют ещё функцию проверки существования:

Код: Выделить всё Развернуть
function hasClass(el, cls) {
 return el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}

А потом используют результат этой функции перед добавлением или удалением «слов» из className:
... ну а далее, если интересно, прошу на сайт автора, откуда и был стянут отрывок ) : Функция для работы с className в javascript




Похожие темыКомментарии ПросмотрыПоследнее сообщение
0649JavaScript. Логические операторы и ...
Сообщение от: Admin
0560Замена прямых кавычек на “ёлочки”. ...
Сообщение от: Admin
02352Дженнифер Нидерст Роббинс. HTML5, C...
Сообщение от: Admin
02232Предпросмотр картинки перед загрузк...
Сообщение от: Admin
151432Re: Рейтинг материалов +/- (плюс/ми...
Сообщение от: kinouser