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

Синтаксис

element.style.outlineStyle

Значення

Return

Переглядачі

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

Приклади

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

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

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