JS властивість CSSStyleDeclaration.opacity

Загальний опис

element.style.opacity – це властивість JavaScript, яка дозволяє змінювати прозорість HTML-елементу. Значення цієї властивості є числом від 0 до 1, де 0 означає повну прозорість (невидимість), а 1 – повну непрозорість (видимість). Проміжні значення встановлюють відповідний рівень прозорості.

Для роботи з властивістю element.style.opacity, спочатку потрібно отримати доступ до елемента DOM. Це можна зробити за допомогою різних методів, таких як document.getElementById, document.querySelector та інші. Після цього можна змінювати значення прозорості, використовуючи цю властивість.

Приклад 1: Зміна прозорості елемента

// Отримуємо елемент за його ID
let element = document.getElementById('myElement');

// Встановлюємо прозорість на 50%
element.style.opacity = '0.5';

В цьому прикладі ми отримали елемент з ID myElement і встановили його прозорість на 50%, задавши значення 0.5 для властивості element.style.opacity.

Також можна змінювати прозорість елементів динамічно, наприклад, під час події mouseover (наведення курсора) або click (натискання).

Приклад 2: Динамічна зміна прозорості при наведені курсора

// Отримуємо елемент за його ID
let element = document.getElementById('myElement');

// Додаємо обробник події наведення курсора
element.addEventListener('mouseover', function() {
    element.style.opacity = '0.7';
});

// Додаємо обробник події відведення курсора
element.addEventListener('mouseout', function() {
    element.style.opacity = '1';
});

У цьому прикладі ми додали два обробники подій для елемента з ID myElement. При наведенні курсора прозорість змінюється на 70% (0.7), а при відведенні курсора відновлюється до 100% (1).

Метод element.style.opacity також дозволяє створювати ефекти анімації за допомогою JavaScript. Для цього можна використовувати функцію setInterval або requestAnimationFrame.

Приклад 3: Анімація прозорості

let element = document.getElementById('myElement');
let opacity = 0;
let interval = setInterval(function() {
    opacity += 0.01;
    element.style.opacity = opacity.toString();
    if (opacity >= 1) {
        clearInterval(interval);
    }
}, 10);

У цьому прикладі ми створили просту анімацію, яка поступово збільшує прозорість елемента з 0 до 1 за допомогою функції setInterval. Інтервал оновлення встановлений на 10 мілісекунд, а приріст прозорості – на 0.01.

Отже, властивість element.style.opacity є потужним інструментом для керування прозорістю HTML-елементів, що дозволяє створювати різноманітні візуальні ефекти та динамічно змінювати стиль елементів на сторінці.

правити

Порада

Щоб уникнути проблем з сумісністю та кросбраузерних багів, завжди задавайте значення прозорості у вигляді рядка. Деякі браузери можуть не коректно обробляти числові значення. Наприклад, замість element.style.opacity = 0.5; використовуйте element.style.opacity = '0.5';.

автор: Bond правити

Порада

Для кращої продуктивності при анімаціях варто використовувати requestAnimationFrame замість setInterval або setTimeout. Це забезпечить більш плавну анімацію, оскільки браузер оптимізує відтворення кадрів. Наприклад, можна створити функцію анімації, яка рекурсивно викликає себе через requestAnimationFrame: function animate() { opacity += 0.01; element.style.opacity = opacity.toString(); if (opacity < 1) { requestAnimationFrame(animate); } }.

автор: Bond правити

Порада

Корисно знати, що властивість opacity успадковується дочірніми елементами. Якщо ви хочете змінити прозорість лише одного елемента без впливу на його нащадків, використовуйте CSS-властивість rgba для кольору фону замість opacity. Наприклад, замість element.style.opacity = '0.5'; можна використовувати element.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.opacity

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	2	9	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

window.addEventListener('scroll', function() {
    let element = document.getElementById('myElement');
    let scrollPosition = window.scrollY;
    let windowHeight = window.innerHeight;
    let opacity = 1 - (scrollPosition / windowHeight);
    element.style.opacity = opacity > 0 ? opacity : 0;
});

<button id="myButton">Натисни</button>
<div id="myElement">Демонстраційний елемент</div>

document.getElementById('myButton').addEventListener('click', function() {
    let element = document.getElementById('myElement');
    let opacity = 1;
    let timer = setInterval(function() {
        if (opacity <= 0.1) {
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = opacity;
        opacity -= 0.1;
    }, 50);
});