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

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

element.style.outlineWidth - це властивість JavaScript, яка дозволяє змінювати ширину контуру (outline) HTML-елемента. Контур - це лінія, яка малюється навколо елемента, поза його межами (border). Використання outlineWidth дає можливість налаштовувати товщину цієї лінії, роблячи її більш помітною або тоншою залежно від потреб дизайну.

Щоб використовувати element.style.outlineWidth, спочатку потрібно отримати доступ до HTML-елемента через DOM. Це можна зробити за допомогою методів document.getElementById, document.querySelector або інших способів вибору елементів. Після цього, ви можете призначити значення властивості outlineWidth у різних одиницях виміру, таких як пікселі (px), емси (em), відсотки (%) тощо.

Наприклад, для встановлення ширини контуру в 5 пікселів для елемента з ID myElement, можна використати наступний код:

let element = document.getElementById('myElement');
element.style.outlineWidth = '5px';
element.style.outlineStyle = 'solid'; // Потрібно задати стиль, щоб контур був видимий
element.style.outlineColor = 'blue'; // Задаємо колір контуру

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

Ви також можете динамічно змінювати ширину контуру залежно від дій користувача, наприклад, при наведенні миші:

let element = document.getElementById('myElement');
element.addEventListener('mouseover', function() {
    element.style.outlineWidth = '10px';
});
element.addEventListener('mouseout', function() {
    element.style.outlineWidth = '2px';
});

Цей приклад збільшує ширину контуру до 10 пікселів при наведенні миші на елемент і повертає її до 2 пікселів при виході миші з елемента.

Властивість outlineWidth підтримує різні одиниці виміру, що дозволяє вам налаштовувати її для різних цілей дизайну. Наприклад, використання емсів (em) дозволяє зробити контур пропорційним до розміру шрифту:

let element = document.getElementById('myElement');
element.style.outlineWidth = '0.2em';

Використання відсотків (%) дозволяє налаштовувати контур відносно розмірів самого елемента, що може бути корисно для адаптивного дизайну.

let element = document.getElementById('myElement');
element.style.outlineWidth = '1%';

Зміна ширини контуру може бути корисною для створення акцентів на елементах, виділення активних або вибраних елементів, а також для покращення доступності. Наприклад, ви можете збільшити ширину контуру для полів форм, щоб краще виділити їх для користувачів з вадами зору.

Таким чином, element.style.outlineWidth є потужним інструментом для налаштування зовнішнього вигляду HTML-елементів. Ця властивість дозволяє вам гнучко керувати товщиною контуру, створюючи як прості, так і складні стилістичні рішення для вашого веб-дизайну.

Синтаксис

element.style.outlineWidth

Значення

Return

Переглядачі

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

Приклади

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

const elements = document.querySelectorAll('.hover-element');

elements.forEach(element => {
    element.addEventListener('mouseenter', () => {
        element.style.outlineWidth = '5px';
        element.style.outlineStyle = 'solid';
        element.style.outlineColor = 'blue';
    });

    element.addEventListener('mouseleave', () => {
        element.style.outlineWidth = '1px';
        element.style.outlineStyle = 'solid';
        element.style.outlineColor = 'blue';
    });
});

const button = document.querySelector('button');
const element = document.querySelector('.interactive-element');

button.addEventListener('click', () => {
    let currentWidth = parseInt(element.style.outlineWidth) || 0;
    currentWidth += 2;
    element.style.outlineWidth = `${currentWidth}px`;
    element.style.outlineStyle = 'dotted';
    element.style.outlineColor = 'green';
});