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

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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);
});

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;
});