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

Значення

Return

Переглядачі

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

Приклади

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

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

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