Добавление классов

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

Основной метод: addClass

Метод addClass используется для добавления одного или нескольких CSS-классов к выбранным элементам. Синтаксис:

u(selector).addClass(className);
  • selector — строка с CSS-селектором, по которому выбираются элементы.
  • className — название класса или несколько классов через пробел.

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

// Добавление одного класса
u('div').addClass('highlight');

// Добавление нескольких классов одновременно
u('.item').addClass('active selected');

При добавлении класса Umbrella JS автоматически проверяет, существует ли уже класс у элемента. Дублирование не происходит.

Добавление классов с динамическим вычислением

Можно использовать функцию для динамического присвоения классов. Функция получает текущий индекс элемента и его объект DOM, возвращая строку с классами:

u('li').addClass(function(index, element) {
    return index % 2 === 0 ? 'even' : 'odd';
});

В этом примере каждому четному элементу <li> добавляется класс even, а нечетным — odd. Такой подход удобен при работе с списками, таблицами и динамическими данными.

Проверка существования класса

Хотя метод addClass безопасен в плане дублирования, иногда важно узнать, есть ли у элемента конкретный класс:

if (!u('#menu').hasClass('open')) {
    u('#menu').addClass('open');
}

Метод hasClass возвращает true, если класс присутствует хотя бы у одного выбранного элемента.

Последовательное добавление нескольких классов

Umbrella JS поддерживает цепочку вызовов, что делает код компактным и удобным:

u('p')
    .addClass('text-large')
    .addClass('highlighted')
    .addClass('fade-in');

Каждый метод возвращает объект Umbrella, позволяя применять дальнейшие манипуляции к тем же элементам без повторного выбора.

Особенности работы с коллекцией элементов

Методы библиотеки применяются ко всей коллекции, возвращаемой селектором. Это значит, что addClass добавляет указанный класс ко всем элементам сразу:

u('button').addClass('btn-primary');

Даже если на странице несколько кнопок, каждая из них получит класс btn-primary без необходимости писать циклы.

Совместимость с CSS-переменными и условными классами

addClass позволяет использовать классы, которые зависят от состояния или других данных:

u('.card').addClass('card-' + theme);

Если переменная theme содержит 'dark', то к каждому элементу с классом card добавится card-dark. Это облегчает создание динамических интерфейсов и темизацию элементов.

Интеграция с другими методами Umbrella

Добавление классов часто сочетается с другими методами библиотеки:

  • removeClass — удаление одного или нескольких классов.
  • toggleClass — переключение состояния класса.
  • hasClass — проверка наличия класса.

Пример комплексного подхода:

u('.nav-item').each(function(index, el) {
    u(el).toggleClass('active', index === currentIndex);
});

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

Важные моменты и рекомендации

  • Производительность: addClass работает быстро даже с большими коллекциями, поскольку Umbrella JS оптимизирована для массовых операций.
  • Безопасность: дублирование классов не происходит, что предотвращает лишние стили и баги.
  • Цепочка методов: возвращаемый объект позволяет сочетать несколько операций без повторного поиска элементов.

Добавление классов через Umbrella JS обеспечивает чистый, читаемый и эффективный способ управления стилями элементов на странице, упрощая динамическое изменение интерфейса и поддержку CSS.

Оглавление