Добавление и удаление класса, функции addClass () и removeClass ()

Встроенная JS-библиотека ядра 1С-Битрикс содержит удобные «джейквери-подобные» методы для работы с CSS-классами. BX.addClass() и BX.removeClass() позволяют безопасно добавлять или удалять класс у одного или группы узлов, возвращая сам узел для дальнейших операций. Это основной строительный блок практически любого динамического интерфейса на Bitrix-сайтах.

BX.addClass(node, className);

BX.removeClass(node, className);

Минимальное подключение ядра

На большинстве шаблонов kernel_main.js и kernel_main.css уже подключены системой. Если создаёте «голый» шаблон, не забудьте:

<?php
\Bitrix\Main\Page\Asset::getInstance()
  ->addJs('/bitrix/js/main/core/core.js');
?>

После этого в скриптах доступен глобальный объект BX.

Базовое использование

<div id="feedback" class="message"></div>
<script>
BX.ready(function () {
    const box = BX('feedback');
    BX.addClass(box, 'message--success');
});
</script>

При готовности DOM, мы находим узел по id и добавляем модификатор. Метод не дублирует класс, если тот уже присутствует.

Удаление и переключение класса

<button id="toggle">Вкл/Выкл</button>
<div id="panel" class="panel"></div>
<script>
BX.ready(function () {
    const btn = BX('toggle');
    const panel = BX('panel');
    BX.bind(btn, 'click', () => {
        // класс active будем то добавлять, то удалять
        if (BX.hasClass(panel, 'active')) { // проверим текущее состояние
            BX.removeClass(panel, 'active');
        } else {
            BX.addClass(panel, 'active');
        }
    });
});
</script>

Метод BX.hasClass возвращает boolean и помогает избежать лишних операций.

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

<ul id="catalog">
  <li>Товар 1</li>
  <li>Товар 2</li>
  <li>Товар 3</li>
</ul>
<script>
BX.ready(function () {
    BX.findChildren( // найдём все <li>
        BX('catalog'),
        { tag: 'li' },
        true
    ).forEach(item => BX.addClass(item, 'catalog__item'));
});
</script>