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

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

element.style.isolation - це властивість CSS, яка використовується для визначення, чи буде елемент ізольований для створення нової контексту ізоляції. Це важливо при роботі з багаторівневими графічними ефектами, такими як змішування кольорів, оскільки дозволяє контролювати, як елементи взаємодіють з фоном та іншими елементами.

Коли значення властивості isolation встановлено на auto, елемент не створює новий контекст ізоляції, і ефекти змішування кольорів можуть впливати на елементи поза його межами. Якщо значення встановлено на isolate, елемент створює новий контекст ізоляції, обмежуючи ефекти змішування лише межами цього елемента.

Щоб використовувати властивість isolation в JavaScript, необхідно отримати доступ до HTML-елемента і встановити значення цієї властивості через об'єкт style. Нижче наведено приклад використання element.style.isolation.

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

// Встановлюємо властивість isolation
myElement.style.isolation = 'isolate';

У цьому прикладі ми отримали HTML-елемент з ідентифікатором myElement і встановили для його властивості isolation значення isolate. Це означає, що цей елемент буде ізольований і створить новий контекст ізоляції, обмежуючи будь-які ефекти змішування кольорів лише межами цього елемента.

Значення властивості isolation можуть бути наступними:

• auto: Значення за замовчуванням, елемент не створює новий контекст ізоляції.
• isolate: Елемент створює новий контекст ізоляції.

Ще один приклад використання властивості isolation для контролю графічних ефектів у складному інтерфейсі:

// Отримуємо елементи за їхніми класами
let container = document.querySelector('.container');
let overlay = document.querySelector('.overlay');

// Встановлюємо властивість isolation для контейнера
container.style.isolation = 'isolate';

// Додаємо графічний ефект до накладання
overlay.style.mixBlendMode = 'multiply';

У цьому прикладі ми отримали два елементи: container і overlay. Ми встановили властивість isolation для контейнера на isolate, щоб створити новий контекст ізоляції. Потім ми додали графічний ефект змішування кольорів (mixBlendMode) для елемента overlay. Завдяки ізоляції контейнера, ефект змішування кольорів впливатиме тільки на елементи всередині контейнера, не впливаючи на інші частини сторінки.

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

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

Синтаксис

element.style.isolation

Значення

Return

Переглядачі

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

Приклади

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

// Отримуємо елементи за їхніми ID
let backgroundElement = document.getElementById('background');
let contentElement = document.getElementById('content');

// Встановлюємо властивість isolation для фону
backgroundElement.style.isolation = 'isolate';

// Додаємо ефект змішування кольорів для вмісту
contentElement.style.mixBlendMode = 'overlay';

// Отримуємо елементи за їхніми класами
let sectionElement = document.querySelector('.section');
let overlayElement = document.querySelector('.overlay');

// Встановлюємо властивість isolation для секції
sectionElement.style.isolation = 'isolate';

// Додаємо ефект накладання для оверлею
overlayElement.style.mixBlendMode = 'screen';