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

Порада:

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

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

Порада:

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

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

Синтаксис

element.style.borderStyle

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі користувач може вибирати різні стилі обведення для елемента за допомогою перемикачів. JavaScript слухає зміни у формі та змінює властивість borderStyle елемента відповідно до вибраного значення. Це дозволяє інтерактивно демонструвати роботу з цією властивістю та надавати користувачам можливість практичного досвіду.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/NWVyvre">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

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

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

JS довідник

JavaScript

Наповнення JS розділу

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади