Управление DOM-структурой в 1С-Битрикс: функции BX.width() и BX.height()

Работая с фронтендом на 1С-Битрикс, почти каждый проект сталкивается с задачей динамического изменения размеров элементов: подгоняем высоту карточек под самый высокий блок, анимируем раскрытие аккордеона, вычисляем ширину колонки до и после перестроения сетки.

Всё это решается двумя лаконичными методами библиотеки Bitrix JavaScript — BX.width() и BX.height().

1. Сигнатура и поведение

BX.width(element [, value]);
BX.height(element [, value]);

Важно: Число передаём без px, функция сама добавит необходимую единицу измерения.

2. Получаем текущие размеры

<div id="statsBox" class="box">Статистика</div>
<script>
BX.ready(() => {
    const box = BX('statsBox');
    console.log('Width:',  BX.width(box));   // -> 300 (пример)
    console.log('Height:', BX.height(box));  // -> 120 (пример)
});
</script>

Такое считывание часто используют при построении мозаичных или flex-сеток, когда важно знать реальный размер контента после рендеринга.

3. Задаём размеры интерактивно

3.1. Увеличиваем высоту по клику

<button id="growBtn" class="btn">Увеличить блок</button>
<div id="growTarget" class="panel">Контент блока</div>
<script>
BX.ready(() => {
    const btn = BX('growBtn');
    const target = BX('growTarget');
    BX.bind(btn, 'click', () => {
        const newHeight = BX.height(target) + 50; // прибавим 50 px
        BX.height(target, newHeight);
        btn.textContent = `Высота: ${newHeight}px`;
    });
});
</script>
<style>
.btn { cursor:pointer;padding:6px 12px;background:#4caf50;color:#fff;border:none;border-radius:4px; }
.panel { width:260px;height:120px;margin-top:12px;background:#f5f5f5;transition:height .3s ease; }
</style>

3.2. Изменяем ширину с анимацией

BX не содержит встроенный аниматор размеров, но можно комбинировать с CSS-transition или модулем BX.fx:

<div id="wideBox" class="stretch">Нажми меня</div>
<script>
BX.ready(() => {
    BX.bind(BX('wideBox'), 'click', function () {
        // Переключаемся между 150 и 350 px
        const targetWidth = BX.width(this) === 150 ? 350 : 150;
        BX.width(this, targetWidth);
    });
});
</script>
<style>
.stretch {
    width:150px;height:60px;line-height:60px;margin:20px auto;text-align:center;
    background:#2196f3;color:#fff;border-radius:8px;transition:width .4s ease;
}
</style>

4. Массовое выравнивание карточек

Частый кейс — сделать все карточки одинаковой высоты, равной максимальной.

<div class="card">Карточка 1<br>Короткий текст</div>
<div class="card">Карточка 2<br>Очень длинный текст<br>ещё строка</div>
<div class="card">Карточка 3</div>
<script>
BX.ready(() => {
    const cards = document.querySelectorAll('.card');
    let maxH = 0;
    cards.forEach(card => { maxH = Math.max(maxH, BX.height(card)); });
    cards.forEach(card => BX.height(card, maxH));
});
</script>
<style>
.card {
    display:inline-block;width:200px;margin:8px;padding:12px;
    background:#eee;border:1px solid #ccc;border-radius:6px;vertical-align:top;
}
</style>

5. Адаптивная подстройка при ресайзе окна

BX.ready(() => {
    const sidebar = BX('sidebar');
    const adjust = () => {
        const vw = BX.width(document.documentElement);
        BX.width(sidebar, vw < 768 ? vw : 300); // на мобилках — 100 %, иначе 300px
    };
    BX.bind(window, 'resize', BX.debounce(adjust, 150)); // защитим от частых вызовов
    adjust(); // первичный вызов
});

Здесь используется BX.debounce() (часть ядра Bitrix) для оптимизации.

6. Раскрывающееся описание (аккордеон)

<h3 class="faq__title">Что такое BX.width/BX.height?</h3>
<div class="faq__body" style="height:0;overflow:hidden;">
  Эти функции позволяют считывать и задавать размеры…
</div>
<script>
BX.ready(() => {
    const titles = document.querySelectorAll('.faq__title');
    titles.forEach(title => {
        BX.bind(title, 'click', () => {
            const body = title.nextElementSibling;
            const isOpen = BX.height(body) > 0;
            BX.height(body, isOpen ? 0 : body.scrollHeight);
            title.classList.toggle('open', !isOpen);
        });
    });
});
</script>
<style>
.faq__title { cursor:pointer;margin:12px 0;padding:8px;background:#ffeb3b; }
.faq__title.open { background:#ffe12b; }
.faq__body { transition:height .25s ease;padding:0 8px;background:#fff3cd; }
</style>

7. Подводные камни и лайфхаки

8. Лучшие практики

1. Минимизируйте обращения. Сохраняйте вычисленные размеры в переменные, если используете их несколько раз за тик.
2. Комбинируйте с CSS-транзишнами вместо таймеров setInterval — браузеру проще оптимизировать.
3. Используйте debouncing для resize и scroll-событий, чтобы не плодить лишние перерисовки.
4. Профилируйте. Chrome DevTools > Performance подскажет, нет ли лишних reflow.

9. Заключение

BX.width() и BX.height() — маленькие, но крайне полезные инструменты, без которых сложно представить динамические страницы на 1С-Битрикс. С их помощью вы:

• считываете реальные размеры элементов после рендера,
• программно задаёте новые значения,
• легко строите адаптивные интерфейсы и красивые анимации.

Берите примеры из статьи за основу, адаптируйте под ваш проект и помните: правильное управление размерами — это не только визуальная гармония, но и производительность сайта.