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

Bliss.js предоставляет удобный и лаконичный API для работы с DOM, включая управление CSS-классами элементов. Основные методы позволяют добавлять, удалять и проверять наличие классов без необходимости напрямую манипулировать classList.

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

Для добавления одного или нескольких классов используется метод addClass. Он принимает один аргумент — строку с названием класса, либо массив строк для множественных классов.

// Один класс
Bliss('.button').addClass('active');

// Несколько классов
Bliss('.menu-item').addClass(['highlight', 'selected']);

Особенности:

  • Метод безопасен при добавлении класса, который уже присутствует — дубликаты не создаются.
  • Можно комбинировать с селекторами, возвращающими несколько элементов, и addClass применится ко всем выбранным узлам.
// Добавление класса ко всем элементам списка
Bliss('li').addClass('visible');

Удаление классов

Метод removeClass позволяет убрать один или несколько классов с элемента. Аргументы работают аналогично addClass: строка или массив строк.

// Один класс
Bliss('.button').removeClass('active');

// Несколько классов
Bliss('.menu-item').removeClass(['highlight', 'selected']);

Особенности:

  • Если указанный класс отсутствует, ошибок не возникает.
  • Можно комбинировать с методами фильтрации и итерации по множественным элементам.
// Удаление класса со всех элементов списка, кроме первого
Bliss('li:not(:first-child)').removeClass('visible');

Проверка наличия класса

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

if (Bliss('.button').hasClass('active')) {
    console.log('Кнопка активна');
}

Особенности:

  • Работает только с первым элементом из выбранного набора, если селектор возвращает несколько узлов.
  • Может использоваться для условной логики управления состояниями элементов.
Bliss('.menu-item').each(item => {
    if (!Bliss(item).hasClass('disabled')) {
        Bliss(item).addClass('clickable');
    }
});

Переключение классов

Метод toggleClass добавляет класс, если его нет, и удаляет, если он уже есть. Принимает один класс или массив классов.

// Переключение одного класса
Bliss('.button').toggleClass('active');

// Переключение нескольких классов
Bliss('.menu-item').toggleClass(['highlight', 'selected']);

Особенности:

  • Позволяет создавать динамические интерфейсы без явной проверки наличия классов.
  • Можно использовать с callback для управления состояниями:
Bliss('.menu-item').each(item => {
    Bliss(item).toggleClass('highlight');
});

Работа с несколькими элементами

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

// Добавление класса ко всем параграфам
Bliss('p').addClass('visible');

// Удаление класса с выбранных элементов
Bliss('.ad-banner').removeClass('show');

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

Bliss('li')
    .removeClass('highlight')
    .addClass('inactive')
    .each(item => {
        console.log(item.textContent);
    });

Особенности работы с динамическими классами

Bliss.js поддерживает динамическое управление классами, что особенно полезно при:

  • Анимациях (fade-in, slide и т.п.)
  • Реактивных интерфейсах с изменяющимися состояниями
  • Фильтрации и сортировке элементов
Bliss('.notification')
    .addClass('visible')
    .delay(3000)
    .removeClass('visible');

Методы addClass, removeClass и toggleClass могут комбинироваться с другими утилитами Bliss для максимальной гибкости в управлении DOM.

Резюме ключевых методов

Метод Аргументы Возвращает Особенности
addClass строка или массив набор элементов Безопасно добавляет классы
removeClass строка или массив набор элементов Безопасно удаляет классы
hasClass строка boolean Проверка первого элемента
toggleClass строка или массив набор элементов Переключение состояния класса

Эти методы формируют основу управления классами в Bliss.js и позволяют упрощать код, избегая прямой работы с classList и громоздких циклов по DOM.

Оглавление