Управление DOM-структурой в 1С-Битрикс: разбор функции BX.style

JavaScript-ядро Bitrix Framework содержит компактный, но чрезвычайно полезный метод BX.style(). Он упрощает работу со стилями элементов и позволяет как читать, так и изменять CSS-свойства без прямой работы с style и getComputedStyle.

В статье:

• Зачем нужен BX.style() и когда он предпочтительнее чистого JavaScript
• Сигнатура метода и поддерживаемые типы аргументов
• 7 практических примеров, от простых до продвинутых сценариев
• Типичные ошибки и способы их избежать
• Короткий FAQ по производительности и кросс-браузерности

Что делает BX.style()

string | DOMNode BX.style(
    DOMNode node,      // элемент, чей стиль мы читаем или меняем
    string property,   // CSS-свойство в «человеческой» записи, например 'margin-right'
    [string value]     // новое значение (необязательный параметр)
);

• Чтение: передаём node и property – получаем строковое значение свойства.
• Запись: добавляем третий аргумент value – свойство мгновенно меняется.

Важно: имя свойства указываем в CSS-нотации (padding-top, background-color), а не в camelCase.

Базовый пример: задаём отступы body

<script>
BX.ready(function () {
    BX.style(document.body, 'padding', '120px 60px');
    console.log('Текущий верхний отступ:', BX.style(document.body, 'padding-top')); // 120px
});
</script>

Практика: 7 сценариев использования

1. Переключатель прозрачности по клику

<div id="demoBox" class="demo-box">Нажми меня</div>
<script>
BX.ready(function () {
    var box = BX('demoBox');
    // стартовые стили
    BX.style(box, 'opacity', '1');
    BX.style(box, 'transition', 'opacity .3s linear');
    BX.bind(box, 'click', function () {
        var opacityNow = parseFloat(BX.style(this, 'opacity')) || 1;
        BX.style(this, 'opacity', opacityNow === 1 ? '0.35' : '1');
    });
});
</script>
<style>
.demo-box{
    width: 260px;
    margin: 40px auto;
    padding: 12px;
    text-align: center;
    font-size: 18px;
    border-radius: 6px;
    background:#cfd8dc;
    cursor:pointer;
    box-shadow:0 0 8px rgba(0,0,0,.4);
}
</style>

2. Динамическое выравнивание блоков сетки

var cards = BX.findChildren(BX('cardContainer'), { className: 'card' }, true);
cards.forEach(function (card, i) {
    BX.style(card, 'margin-bottom', (i % 3 === 2) ? '0' : '24px');
});

Результат: каждая третья карточка лишается нижнего отступа, сетка выглядит ровно.

3. Получаем вычисленный цвет для аналитики

function getRGB(node){
    var color = BX.style(node, 'background-color');
    console.log('Цвет кнопки:', color); // напр. rgb(33, 150, 243)
}

Полезно, если тема меняется динамически (тёмная/светлая) и нужно логировать фактические значения.

4. Настройка плавного «появления» после AJAX

BX.ajax.loadJSON('/local/api/getBlock.php', {}, function (data) {
    var wrap = BX('wrap');
    wrap.innerHTML = data.html;
    BX.style(wrap, 'opacity', '0');
    setTimeout(function(){
        BX.style(wrap, 'transition', 'opacity .4s');
        BX.style(wrap, 'opacity', '1');
    }, 50);
});

Так мы избегаем «скачка» контента, пока браузер перестраивает макет.

5. Визуальная индикация ошибок формы

function highlightError(input, flag){
    BX.style(input, 'border-color', flag ? '#e53935' : '#cfd8dc');
    BX.style(input, 'background-color', flag ? '#ffebee' : '#fff');
}

BX.style() удобно комбинировать с валидацией Bitrix-форм (BX.Validation).

6. Адаптивная типографика без медиазапросов

window.addEventListener('resize', throttle(function(){
    var size = Math.max(16, window.innerWidth / 80) + 'px';
    BX.style(document.body, 'font-size', size);
}, 150));

Используем технику fluid-type, меняем шрифт при ресайзе непосредственно через JS без лишних классов.

7. Вспомогательная функция «установи, если ещё не»

function setStyleOnce(node, prop, val){
    if (BX.style(node, prop) !== val){
        BX.style(node, prop, val);
    }
}

Так мы избегаем лишних перерисовок, если стиль уже установлен.

Часто встречающиеся ошибки

Производительность и кросс-браузерность

• Чтение свойств — дорого, потому что браузеру может понадобиться вынести элемент из GPU-кеша (layout thrashing). Читайте оптом, записывайте пакетом.
• Запись — быстрее, но частое изменение разных свойств по очереди вызывает множественные перерисовки. Объединяйте изменения в requestAnimationFrame или используйте BX.defer.
• Поддержка IE11 и старше остаётся, поскольку BX.style внутри использует currentStyle / getComputedStyle.

Мини-FAQ

BX.style заменяет jQuery .css()?

Да, с точки зрения функционала. Разница лишь в синтаксисе и том, что Bitrix-метод легче: нет обвязки с коллекциями.

Нужен ли camelCase для свойств-модификаторов (paddingTop)?

Нет, всегда используйте padding-top. Исключений нет.

Как снять стиль, который установил ранее?

Пишите пустую строку: BX.style(node, 'background-color', '').

Работает ли метод с псевдо-элементами (::after)?

Нет. Для ::after и ::before используйте стили классов или CSS-переменные.

Заключение

BX.style() – лаконичный инструмент, который покрывает 90 % задач по изменению inline-стилей в 1С-Битрикс. Правильное использование метода ускоряет разработку, избавляет от громоздкого кода и повышает производительность за счёт оптимизированных алгоритмов внутри ядра Bitrix.

Применяйте при точечных изменениях, помните о кэшировании layout-а и комбинируйте с остальным API (BX.bind, BX.show, BX.hide). Тогда управление DOM станет простым и предсказуемым.