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)';
Поширені фільтри
blur(): розмиває елемент. Параметр визначає радіус розмиття.element.style.filter = 'blur(10px)';brightness(): змінює яскравість елемента. Параметр більше 1 збільшує яскравість, менше 1 - зменшує.element.style.filter = 'brightness(1.5)';contrast(): змінює контрастність елемента. Значення більше 100% збільшує контрастність, менше 100% - зменшує.element.style.filter = 'contrast(200%)';grayscale(): перетворює елемент на відтінки сірого. Значення від 0% до 100%.element.style.filter = 'grayscale(100%)';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';
Ця властивість є потужним інструментом для розробників, які хочуть покращити візуальну привабливість своїх веб-сторінок без використання графічного редактора.
| Порада: | Використовуйте анімацію CSS разом з Це додасть елегантності вашим інтерфейсам, роблячи взаємодію з користувачем більш приємною. |
| Порада: | Використовуйте Цей підхід також може бути корисним для створення інтерактивних галерей зображень. |
| Порада: | Не забувайте про продуктивність при використанні фільтрів. Застосування фільтрів може вплинути на швидкість рендерингу, особливо на мобільних пристроях або при використанні складних ефектів. Використовуйте фільтри економно і перевіряйте продуктивність вашого сайту на різних пристроях. |
Синтаксис
element.style.filterЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може налаштовувати яскравість, контраст і розмиття зображення за допомогою повзунків. Значення кожного повзунка оновлюється в режимі реального часу, що дозволяє спостерігати зміни на зображенні без перезавантаження сторінки. Цей приклад допомагає краще зрозуміти можливості властивості element.style.filter і як її можна застосовувати для створення інтерактивних і візуально привабливих елементів.
У цьому прикладі використовується метод element.style.filter для створення ефекту чорно-білого зображення при наведенні курсора на зображення. Коли користувач наводить курсор на зображення з ідентифікатором myImage, зображення плавно стає чорно-білим, і при відведенні курсора воно повертається до свого початкового кольору. Цей підхід корисний для створення інтерактивних ефектів на веб-сторінках, що покращують користувацький досвід.
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%)';
});
Цей приклад демонструє використання методу element.style.filter для додавання тіні до текстового елемента при натисканні та видалення цієї тіні при подвійному натисканні. Коли користувач клацає на текст з ідентифікатором myText, до нього додається тінь, яка робить текст більш виразним, а при подвійному натисканні тінь видаляється. Це може бути корисним для створення інтерактивних інтерфейсів, де потрібно підкреслювати важливі елементи.
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';
});