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

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

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

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

Основні значення, які можна присвоїти outlineStyle, включають:

• 'none' - контур не відображається.
• 'solid' - суцільна лінія.
• 'dotted' - пунктирна лінія.
• 'dashed' - штрихована лінія.
• 'double' - подвійна лінія.
• 'groove', 'ridge', 'inset', 'outset' - тривимірні стилі ліній.

Наприклад, щоб застосувати суцільний контур до елемента, можна написати наступний код:

let element = document.getElementById('myElement');
element.style.outlineStyle = 'solid';
element.style.outlineWidth = '2px'; // Зазначаємо ширину контуру для його видимості
element.style.outlineColor = 'blue'; // Колір контуру

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

Також можна змінити стиль контуру на інші варіанти:

let element = document.getElementById('myElement');
element.style.outlineStyle = 'dotted'; // Пунктирний контур
element.style.outlineWidth = '3px';
element.style.outlineColor = 'green';

Цей приклад встановлює пунктирний зелений контур товщиною 3 пікселя.

Використання outlineStyle може бути корисним у різних випадках. Наприклад, при налагодженні ви можете використовувати контури для виділення елементів, щоб бачити їхні межі:

let debugElement = document.querySelector('.debug');
debugElement.style.outlineStyle = 'dashed';
debugElement.style.outlineWidth = '1px';
debugElement.style.outlineColor = 'red';

Цей код додасть штрихований червоний контур до всіх елементів з класом debug, допомагаючи легко ідентифікувати їх під час розробки.

Завдяки гнучкості outlineStyle, ви можете динамічно змінювати стиль контуру в залежності від дій користувача. Наприклад, ви можете змінювати стиль при наведенні миші:

let element = document.getElementById('myElement');
element.addEventListener('mouseover', function() {
    element.style.outlineStyle = 'double';
    element.style.outlineWidth = '4px';
    element.style.outlineColor = 'orange';
});
element.addEventListener('mouseout', function() {
    element.style.outlineStyle = 'none';
});

У цьому прикладі контур стає подвійним і помаранчевим при наведенні миші, і зникає, коли миша залишає елемент.

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

правити

Порада

Використовуйте outlineStyle для тимчасового виділення елементів під час налагодження. Це допоможе швидко знайти і перевірити конкретні елементи на сторінці без постійного редагування CSS-файлів. Виділення елементів контурами допомагає швидше орієнтуватися у великому коді.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.outlineStyle

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

button.addEventListener('click', () => {
    const currentStyle = element.style.outlineStyle;
    element.style.outlineStyle = currentStyle === 'dashed' ? 'solid' : 'dashed';
    element.style.outlineColor = 'black';
    element.style.outlineWidth = '2px';
});

<input type="text" value="текст для прикладу">

const inputFields = document.querySelectorAll('input');

inputFields.forEach(field => {
    field.addEventListener('focus', () => {
        field.style.outlineStyle = 'dotted';
        field.style.outlineColor = 'blue';
        field.style.outlineWidth = '2px';
    });

    field.addEventListener('blur', () => {
        field.style.outline = 'none';
    });
});