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

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

element.style.filter - це властивість, яка дозволяє застосовувати візуальні ефекти до елементів HTML за допомогою різноманітних фільтрів. З її допомогою можна, наприклад, розмити зображення, змінити його яскравість, контрастність, насиченість тощо.

Властивість element.style.filter приймає рядок, що містить один або більше функцій фільтра, розділених пробілами. Кожна функція фільтра може мати свої параметри, які визначають інтенсивність або інші характеристики ефекту.

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

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

// Застосовуємо фільтр розмиття
element.style.filter = 'blur(5px)';

Поширені фільтри

1. blur(): розмиває елемент. Параметр визначає радіус розмиття.

   element.style.filter = 'blur(10px)';
   

2. brightness(): змінює яскравість елемента. Параметр більше 1 збільшує яскравість, менше 1 - зменшує.

   element.style.filter = 'brightness(1.5)';
   

3. contrast(): змінює контрастність елемента. Значення більше 100% збільшує контрастність, менше 100% - зменшує.

   element.style.filter = 'contrast(200%)';
   

4. grayscale(): перетворює елемент на відтінки сірого. Значення від 0% до 100%.

   element.style.filter = 'grayscale(100%)';
   

5. sepia(): додає сепійний ефект до елемента. Значення від 0% до 100%.

   element.style.filter = 'sepia(50%)';
   

Комбінування фільтрів

Можна застосовувати кілька фільтрів одночасно, просто розділивши їх пробілами в одному рядку.

// Комбінування фільтрів розмиття та яскравості
element.style.filter = 'blur(5px) brightness(1.2)';

Видалення фільтрів

Щоб видалити всі фільтри з елемента, достатньо встановити властивість filter у порожній рядок або значення "none".

// Видалення всіх фільтрів
element.style.filter = '';
// або
element.style.filter = 'none';

Ця властивість є потужним інструментом для розробників, які хочуть покращити візуальну привабливість своїх веб-сторінок без використання графічного редактора.

правити

Порада

Не забувайте про продуктивність при використанні фільтрів. Застосування фільтрів може вплинути на швидкість рендерингу, особливо на мобільних пристроях або при використанні складних ефектів. Використовуйте фільтри економно і перевіряйте продуктивність вашого сайту на різних пристроях.

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

Порада

Використовуйте element.style.filter для створення ефектів затемнення або освітлення зображень при наведенні. Це може покращити користувацький інтерфейс, роблячи його більш інтерактивним:

element.addEventListener('mouseover', () => {
    element.style.filter = 'brightness(0.5)';
});
element.addEventListener('mouseout', () => {
    element.style.filter = 'brightness(1)';
});

Цей підхід також може бути корисним для створення інтерактивних галерей зображень.

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

Порада

Використовуйте анімацію CSS разом з element.style.filter для плавних переходів ефектів. Наприклад, щоб зробити плавний перехід розмиття під час наведення:

.element {
    transition: filter 0.3s ease;
}

element.addEventListener('mouseover', () => {
    element.style.filter = 'blur(3px)';
});
element.addEventListener('mouseout', () => {
    element.style.filter = 'none';
});

Це додасть елегантності вашим інтерфейсам, роблячи взаємодію з користувачем більш приємною.

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

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

Синтаксис

element.style.filter

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

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

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

Переглядач
	-	-

Приклади

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

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

let textElement = document.getElementById('myText');
textElement.addEventListener('click', function() {
    textElement.style.transition = 'filter 0.3s ease-in-out';
    textElement.style.filter = 'drop-shadow(5px 5px 10px rgba(0,0,0,0.5))';
});

textElement.addEventListener('dblclick', function() {
    textElement.style.transition = 'filter 0.3s ease-in-out';
    textElement.style.filter = 'none';
});

<img id="myImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">

let image = document.getElementById('myImage');
image.addEventListener('mouseover', function() {
    image.style.transition = 'filter 0.5s';
    image.style.filter = 'grayscale(100%)';
});

image.addEventListener('mouseout', function() {
    image.style.transition = 'filter 0.5s';
    image.style.filter = 'grayscale(0%)';
});