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

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

element.style.outline – це властивість JavaScript, яка дозволяє додавати та змінювати обведення навколо елемента. Властивість outline схожа на border, але має кілька важливих відмінностей: outline не займає місця в потоці документа і може бути нерегулярною навколо елемента. Вона використовується для виділення елементів, наприклад, при наведенні курсора або фокусуванні.

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

Приклад 1: Встановлення outline для елемента

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

// Встановлюємо outline: товщина 2px, тип лінії solid, колір червоний
element.style.outline = '2px solid red';

У цьому прикладі ми отримали елемент з ID myElement і встановили для нього outline товщиною 2 пікселі, суцільною лінією червоного кольору.

Властивість outline можна налаштовувати детально, використовуючи окремі властивості outline-width, outline-style, outline-color та outline-offset.

Приклад 2: Використання окремих властивостей outline

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

// Встановлюємо товщину outline
element.style.outlineWidth = '3px';

// Встановлюємо тип лінії outline
element.style.outlineStyle = 'dashed';

// Встановлюємо колір outline
element.style.outlineColor = 'blue';

// Встановлюємо відступ outline від елемента
element.style.outlineOffset = '5px';

У цьому прикладі ми окремо налаштували всі параметри outline для елемента myElement, задавши товщину 3 пікселі, пунктирну лінію синього кольору і відступ 5 пікселів.

Використання властивості outline є зручним способом виділення елементів під час різних подій, таких як наведення курсора або фокусування.

Приклад 3: Виділення елемента при фокусуванні

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

// Додаємо обробник події фокусування
element.addEventListener('focus', function() {
    element.style.outline = '3px solid green';
});

// Додаємо обробник події втрати фокусу
element.addEventListener('blur', function() {
    element.style.outline = 'none';
});

У цьому прикладі ми додали обробники подій для фокусування та втрати фокусу на елементі myElement. При фокусуванні встановлюється зелений outline товщиною 3 пікселі, а при втраті фокусу outline видаляється.

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

Приклад 4: Використання outline-offset для покращення видимості

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

// Встановлюємо outline з відступом
element.style.outline = '2px solid orange';
element.style.outlineOffset = '10px';

У цьому прикладі ми встановили outline з відступом 10 пікселів, що робить обведення більш помітним і візуально привабливим.

Використання властивості element.style.outline дозволяє легко і гнучко виділяти елементи на сторінці, забезпечуючи кращий користувацький досвід.

правити

Порада

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

element.style.outline = '1px solid transparent';

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

Порада

Використання властивості element.style.outline може бути корисним для доступності. Веб-сайти повинні бути доступними для всіх користувачів, включаючи тих, хто використовує клавіатуру для навігації. Додавання чіткої обведення до елементів при фокусуванні допомагає таким користувачам краще орієнтуватися на сторінці. Наприклад:

document.querySelectorAll('button, a').forEach(el => {
    el.addEventListener('focus', function() {
        this.style.outline = '2px solid green';
    });
});

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

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

Синтаксис

element.style.outline

Переглядачі

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

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

Переглядач
	94	88	16.4	80	94	8

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

Переглядач
	94	94	88	16.4

Приклади

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

<button id="highlightButton">Підсвітити</button>
<div class="highlightable">перший елемент highlightable</div>
<div class="highlightable">другий елемент highlightable</div>

document.getElementById('highlightButton').addEventListener('click', function() {
    let elements = document.querySelectorAll('.highlightable');
    elements.forEach(element => {
        element.style.outline = '2px solid red';
    });
});

<div class="hoverable">перший елемент hoverable</div>
<div class="hoverable">другий елемент hoverable</div>

let elements = document.querySelectorAll('.hoverable');
elements.forEach(element => {
    element.addEventListener('mouseenter', function() {
        element.style.outline = '3px dashed blue';
    });
    element.addEventListener('mouseleave', function() {
        element.style.outline = 'none';
    });
});