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-елементів. Ця властивість дозволяє вам гнучко керувати товщиною контуру, створюючи як прості, так і складні стилістичні рішення для вашого веб-дизайну.

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.outlineWidth

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

Переглядач
	4.4	18	4	1

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

Переглядач
	-	-

Приклади

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

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

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

<button>Натисни</button>
<div class="interactive-element">перший елемент interactive-element</div>
<div class="interactive-element">другий елемент interactive-element</div>

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