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

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

element.style.borderTopStyle використовується для встановлення або зміни стилю верхнього краю рамки елемента.

Ця властивість дозволяє визначити, як саме виглядатиме верхній край рамки, і може набувати різних значень, таких як solid, dashed, dotted та інші. Це корисно для створення різноманітних візуальних ефектів та підкреслення важливих частин інтерфейсу.

Щоб встановити стиль верхнього краю рамки, можна використовувати наступний код:

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

Цей код задає верхньому краю рамки стилю solid, що означає суцільну лінію. Властивість borderTopStyle підтримує кілька значень, кожне з яких має свій унікальний вигляд. Деякі з основних значень:

• none: не показує рамку.
• hidden: аналогічний none, але використовується для вирішення конфліктів з іншими стилями.
• dotted: робить рамку крапковою.
• dashed: робить рамку штриховою.
• solid: робить рамку суцільною.
• double: робить рамку подвійною.
• groove: створює ефект врізаного краю.
• ridge: створює ефект виступаючого краю.
• inset: створює ефект втиснутого краю.
• outset: створює ефект виступаючого краю.

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

element.style.borderTopStyle = 'dotted';

Щоб змінювати стиль динамічно, можна використовувати події. Наприклад, змінювати стиль рамки при натисканні кнопки:

let button = document.getElementById('changeStyleButton');
button.addEventListener('click', function() {
    element.style.borderTopStyle = 'dashed';
});

Це змінить стиль верхнього краю рамки на штриховий при натисканні кнопки.

Для зчитування поточного стилю верхнього краю рамки можна використати наступний код:

let currentStyle = element.style.borderTopStyle;
console.log(currentStyle);

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

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

element.addEventListener('mouseover', function() {
    element.style.borderTopStyle = 'groove';
});
element.addEventListener('mouseout', function() {
    element.style.borderTopStyle = 'solid';
});

Це дозволить створити ефект змінення стилю рамки при наведенні, що робить інтерфейс більш інтерактивним та привабливим.

Використання element.style.borderTopStyle надає розробникам велику гнучкість у створенні різноманітних візуальних ефектів і дозволяє легко адаптувати вигляд елементів під різні потреби та умови.

Синтаксис

element.style.borderTopStyle

Значення

Return

Переглядачі

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

Приклади

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

let element = document.getElementById('myElement');
let button = document.getElementById('animateButton');

button.addEventListener('click', function() {
    let styles = ['solid', 'dotted', 'dashed'];
    let index = 0;
    
    let interval = setInterval(function() {
        element.style.borderTopStyle = styles[index];
        index = (index + 1) % styles.length;
    }, 500);
    
    setTimeout(function() {
        clearInterval(interval);
        element.style.borderTopStyle = 'solid'; // Повертаємо початковий стиль
    }, 5000); // Анімація триватиме 5 секунд
});

let element = document.getElementById('myElement');
let date = new Date();
let hours = date.getHours();

if (hours >= 9 && hours < 18) {
    element.style.borderTopStyle = 'solid';
} else {
    element.style.borderTopStyle = 'dotted';
}