Управление DOM-структурой, функция adjust ()

Метод BX.adjust() относится к ядру JavaScript-библиотеки Bitrix и предназначен для быстрого и безопасного изменения существующих DOM-узлов. По сути это «швейцарский нож» для манипуляций с атрибутами, стилями, событиями и содержимым, который избавляет от рутинного element.style, addEventListener, setAttribute и прочих низкоуровневых вызовов.

DOMNode BX.adjust(
    DOMNode node,
    object  data
);

Возвращает ссылку, на тот же узел node.

Поле	Что делает	Особенности использования
`node`	Явная ссылка на узел, если передаётся не первым аргументом.	Используется редко: чаще достаточно передать сам узел первым параметром.
`props`	Свойства DOM-объекта (например `disabled`, `className`, `title`).	Передаётся как объект: `{disabled: true}`.
`style`	CSS-свойства узла.	Пишем в camelCase или строковыми ключами: `{'background-color': '#ff0'}`.
`attrs`	HTML-атрибуты, включая `data-*`.	Единственный способ корректно задать/изменить `data-*`.
`events`	Хеш событий формата `{click: handlerFn, mouseenter: fn2}`.	Старые обработчики не снимаются автоматически.
`children`	Массив DOM-узлов для замены содержимого.	Несовместим с `text` и `html`.
`text`	Текстовое содержимое (экранируется).	Несовместим с `html` и `children`.
`html`	«Сырой» HTML-код (не экранируется).	Несовместим с `text` и `children`.

Важно:text, html, children — взаимоисключающие поля. Укажите только одно из них, иначе Bitrix проигнорирует остальные.

Включаем и выключаем элементы

// Заблокировать кнопку
BX.adjust(BX('submitBtn'), {
    props: { disabled: true }
});
// Разблокировать кнопку
BX.adjust(BX('submitBtn'), {
    props: { disabled: false }
});

Массовое изменение стиля и атрибутов

Исходный HTML:

<div id="obj"
     class="bigtitle"
     data-src="/fff/fff/"
     style="height: 100px; width: 200px; border: 1px solid #ccc; background: #ff0; color: #f00;">
    Объект
</div>

JavaScript, обратите внимание: width, а не weight:

var obj = BX('obj');
BX.adjust(obj, {
    style: {
        height: '200px',
        width: '100px',
        background: '#f00',
        color: '#ff0'
    },
    attrs: {
        'data-src': '/ccc/ccc',
        id:    'obj2',
        class: 'smalltitle'
    },
    text: 'Объект с изменёнными данными'
});

Результат:

<div id="obj2"
     class="smalltitle"
     data-src="/ccc/ccc"
     style="height: 200px; width: 100px; border: 1px solid #ccc; background: #f00; color: #ff0;">
    Объект с изменёнными данными
</div>