Замена классов

Umbrella JS предоставляет удобный и лаконичный способ работы с DOM-элементами, включая управление классами. Одним из часто используемых сценариев является замена одного класса на другой, что позволяет динамически изменять стили элементов без необходимости вручную управлять списком классов.

Метод replaceClass

В Umbrella JS для замены классов используется метод replaceClass. Его основная задача — заменить у выбранных элементов один CSS-класс на другой.

Синтаксис:

u(selector).replaceClass(oldClass, newClass)
  • selector — CSS-селектор, определяющий набор элементов для работы.
  • oldClass — имя класса, который необходимо удалить.
  • newClass — имя класса, который необходимо добавить.

Метод возвращает объект Umbrella JS, что позволяет продолжать цепочку вызовов (chaining).

Пример использования:

u('.button').replaceClass('btn-primary', 'btn-success');

В этом примере все элементы с классом button, у которых присутствует btn-primary, будут заменены на btn-success.

Особенности работы

  1. Множественные элементы Метод автоматически применяет замену ко всем элементам, соответствующим селектору:
u('li.item').replaceClass('inactive', 'active');

Все элементы <li> с классом item, имеющие класс inactive, получат класс active.

  1. Существование нового класса Если новый класс уже присутствует у элемента, метод не создаёт дубликатов. Замена выполняется корректно и не нарушает структуру classList.

  2. Отсутствие старого класса Если у элемента отсутствует oldClass, метод просто добавляет newClass. Это позволяет избегать дополнительных проверок перед заменой.

Комбинации с другими методами

Umbrella JS поддерживает цепочку вызовов, что делает работу с классами гибкой. Например:

u('.tab').replaceClass('active', 'inactive').addClass('highlight');

Сначала происходит замена класса active на inactive, а затем добавляется класс highlight.

Также возможно использовать вместе с методами фильтрации элементов:

u('.menu-item').filter(':first-child').replaceClass('hidden', 'visible');

В этом случае замена класса произойдет только для первого элемента из выбранного набора.

Внутренний механизм

Метод replaceClass фактически использует стандартные свойства DOM — classList.remove() и classList.add(). Благодаря этому:

  • Производительность высокая даже для больших наборов элементов.
  • Не возникает конфликтов с другими классами элемента.
  • Поведение совпадает с нативными методами браузера.

Пример демонстрации внутренней работы:

u('.card').each(function(el) {
    el.classList.remove('collapsed');
    el.classList.add('expanded');
});

Метод replaceClass выполняет то же самое, но в одну строку.

Практические сценарии

  1. Переключение состояния элементов
u('.switch').replaceClass('off', 'on');

Используется для реализации переключателей или динамических кнопок.

  1. Изменение тем оформления
u('body').replaceClass('light-theme', 'dark-theme');

Позволяет переключать визуальные темы на сайте без перезагрузки страницы.

  1. Анимации через CSS
u('.notification').replaceClass('slide-out', 'slide-in');

Смена классов запускает CSS-анимацию или переход между состояниями элемента.

Советы по использованию

  • Не использовать для сложных условий добавления/удаления классов без проверки — в этом случае лучше комбинировать с hasClass.
  • Для массовой динамической замены на больших страницах применять селекторы максимально точные, чтобы минимизировать количество DOM-операций.
  • В цепочке вызовов методы replaceClass, addClass и removeClass могут комбинироваться, создавая компактный и читаемый код.

Метод replaceClass делает управление состояниями элементов интуитивным, сокращает код и полностью интегрируется с философией Umbrella JS — простота и лаконичность.

Оглавление