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

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

element.style.borderStyle — це властивість, яка дозволяє встановлювати стиль обведення елемента. Вона може приймати такі значення, як "solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset", "none" і "hidden".

Для роботи з властивістю element.style.borderStyle, спочатку потрібно отримати доступ до елемента DOM, який ви хочете стилізувати. Це можна зробити за допомогою методів, таких як document.getElementById(), document.querySelector(), або інших методів для пошуку елементів DOM. Після отримання доступу до елемента, ви можете застосовувати різні значення до властивості borderStyle.

Ось приклад того, як встановити суцільну рамку для елемента з ідентифікатором "myElement":

let element = document.getElementById('myElement');
element.style.borderStyle = 'solid';

У цьому прикладі ми отримуємо елемент з ідентифікатором "myElement" і встановлюємо для його рамки суцільний стиль. Ви можете експериментувати з різними значеннями властивості borderStyle, щоб досягти бажаного ефекту.

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

element.style.borderStyle = 'dotted';

А для штрихової рамки:

element.style.borderStyle = 'dashed';

Також можна комбінувати стилі для різних сторін рамки. Наприклад, щоб встановити різні стилі для кожної сторони, можна використовувати наступний синтаксис:

element.style.borderStyle = 'dotted solid dashed double';

Цей код встановлює пунктирну рамку для верхньої сторони, суцільну для правої, штрихову для нижньої і подвійний стиль для лівої сторони.

Властивість borderStyle є дуже корисною для надання елементам веб-сторінки індивідуального вигляду та стилю. Вона дозволяє привертати увагу до певних елементів або контенту, а також покращувати загальний дизайн сторінки. Наприклад, можна використовувати різні стилі обведення для виділення активних елементів або для відображення різних станів форми.

Щоб зробити рамку взагалі невидимою, можна встановити значення "none":

element.style.borderStyle = 'none';

Або, для прихованої рамки, яка не займає місця в макеті, можна використовувати "hidden":

element.style.borderStyle = 'hidden';

Загалом, element.style.borderStyle є важливим інструментом для веб-розробників, який дозволяє контролювати вигляд обведення елементів і створювати більш професійні та привабливі веб-сторінки.

правити

Порада

Поєднуйте borderStyle з іншими властивостями, такими як borderWidth та borderColor, для досягнення складніших ефектів. Наприклад, встановлення різної ширини та кольору обведення для різних станів елемента може надати веб-сторінці професійного вигляду.

element.style.borderStyle = 'solid';
element.style.borderWidth = '2px';
element.style.borderColor = 'blue';

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

Порада

Використовуйте borderStyle для умовного стилювання в залежності від стану або значень змінних. Це може бути корисним у випадках, коли потрібно відобразити різні стилі на основі логіки програми. Наприклад:

if (isActive) {
    element.style.borderStyle = 'double';
} else {
    element.style.borderStyle = 'none';
}

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

Порада

Комбінуйте borderStyle з анімаціями CSS для створення плавних переходів між різними стилями обведення. Це може зробити взаємодію з користувачем більш природною та комфортною. Для цього потрібно додати властивість transition:

element.style.transition = 'border-style 0.5s ease';
element.style.borderStyle = 'solid';
setTimeout(() => {
    element.style.borderStyle = 'dotted';
}, 1000);

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

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

Синтаксис

element.style.borderStyle

Переглядачі

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

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

Переглядач
	1	1	1	3.5	12	4

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

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

Приклади

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

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

document.querySelectorAll('.inputField').forEach((input) => {
    input.addEventListener('focus', function() {
        input.style.borderStyle = 'solid';
        input.style.borderWidth = '2px';
        input.style.borderColor = 'blue';
    });
    input.addEventListener('blur', function() {
        input.style.borderStyle = 'dotted';
        input.style.borderWidth = '1px';
        input.style.borderColor = 'gray';
    });
    input.addEventListener('input', function() {
        if (input.value.length > 5) {
            input.style.borderStyle = 'double';
            input.style.borderWidth = '4px';
            input.style.borderColor = 'green';
        } else {
            input.style.borderStyle = 'solid';
            input.style.borderWidth = '2px';
            input.style.borderColor = 'red';
        }
    });
});

<div id="resizableElement">Демонстраційний елемент</div>

window.addEventListener('resize', function() {
    let element = document.getElementById('resizableElement');
    if (window.innerWidth < 600) {
        element.style.borderStyle = 'dashed';
        element.style.borderWidth = '2px';
        element.style.borderColor = 'red';
    } else if (window.innerWidth < 800) {
        element.style.borderStyle = 'solid';
        element.style.borderWidth = '4px';
        element.style.borderColor = 'blue';
    } else {
        element.style.borderStyle = 'double';
        element.style.borderWidth = '6px';
        element.style.borderColor = 'green';
    }
});