Изменение прозрачности, функция setOpacity ()

В современной веб-разработке управление визуальными элементами играет ключевую роль в создании интерактивных и привлекательных пользовательских интерфейсов.

Зачем вообще менять прозрачность?

Фокус внимания мягкое затухание второстепенных блоков, когда пользователь концентрируется на главном
Интерактивность подсветка кнопки при наведении или постепенное появление уведомления
UX-эффекты создание модальных окон и лёгкая «дымка» фона под оверлеем

В Bitrix всё это делается буквально одной строкой — достаточно вызвать BX.setOpacity.

BX.setOpacity(
    // элемент, над которым работаем
    DOMNode node,
    // степень непрозрачности: 0 – полностью прозрачно, 100 – полностью видно
    integer percent
);

DOMNode node объект узла DOM. Чаще всего это BX('myId') либо результат event.target
integer percent целое число от 0 до 100. Интерфейс API не бросит исключение, но при значении выше 100 браузер просто установит 100

Минимальная инициализация

Вызовите ядро JavaScript Bitrix перед использованием:

<?php
// включаем BX.js
\CJSCore::Init();
?>

Затем в HTML-шаблоне разместите элемент-кандидат:

<div id="opacityBox">Привет, я прозрачный на 70 %</div>

Обработчик:

BX.ready(() => {
    // Сразу после загрузки страницы делаем блок полупрозрачным
    BX.setOpacity(BX('opacityBox'), 70);
});

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

<?php \CJSCore::Init(); ?>
<style>
  .toggle-btn{
      cursor:pointer;
      display:inline-block;
      padding:10px 18px;
      margin:12px;
      font-size:18px;
      background:#d3e4ff;
      border-radius:6px;
      box-shadow:0 0 6px rgba(0,0,0,.25);
      user-select:none;
  }
</style>
<div id="toggleTarget" class="toggle-btn">Нажми — станет 40 %</div>
<script>
BX.ready(() => {
    const target = BX('toggleTarget');
    BX.bind(target, 'click', function () {
        // Проверяем текущий style.opacity, превращаем его из строки в число
        const current = parseFloat(this.style.opacity || 1) * 100;
        const next = current > 50 ? 40 : 100; // чередуем 40 ↔ 100
        BX.setOpacity(this, next);
    });
});
</script>