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

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

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

Ця властивість дозволяє вам встановити ширину, стиль та колір верхнього кордону елемента. Вона є частиною об'єкта style, який дозволяє маніпулювати стилями елемента за допомогою JavaScript.

Для встановлення borderTop, ви можете використати кілька різних синтаксисів, наприклад:

let element = document.getElementById('myElement');
element.style.borderTop = '2px solid red';

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

element.style.borderTopWidth = '2px';
element.style.borderTopStyle = 'solid';
element.style.borderTopColor = 'red';

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

element.style.borderTopColor = 'blue';

Щоб видалити верхню межу, можна встановити значення borderTop на none або initial:

element.style.borderTop = 'none';
// або
element.style.borderTop = 'initial';

Ці значення повернуть межу до її початкового стану або взагалі видалять її.

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

let headerRow = document.getElementById('headerRow');
headerRow.style.borderTop = '3px double black';

Цей приклад встановить подвійний чорний верхній кордон шириною 3 пікселя для рядка з ідентифікатором headerRow.

Ще один приклад - створення динамічних карток з обведенням:

let card = document.createElement('div');
card.style.borderTop = '4px dotted green';
document.body.appendChild(card);

Це створить новий елемент div, додасть йому верхній кордон зеленого кольору з пунктирним стилем шириною 4 пікселя, і вставить його в документ.

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

element.addEventListener('mouseover', function() {
    element.style.borderTop = '5px solid orange';
});
element.addEventListener('mouseout', function() {
    element.style.borderTop = '2px solid blue';
});

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

Таким чином, властивість element.style.borderTop є потужним інструментом для зміни та налаштування верхнього кордону елемента, що дозволяє створювати багаті та інтерактивні інтерфейси.

Синтаксис

element.style.borderTop

Значення

Return

Переглядачі

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

Приклади

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

let listItems = document.querySelectorAll('.list-item');
listItems.forEach(item => {
    item.addEventListener('click', function() {
        listItems.forEach(i => i.style.borderTop = 'none'); // Очистити бордюри для всіх елементів
        this.style.borderTop = '3px solid blue'; // Додати бордюр для активного елемента
    });
});

let element = document.getElementById('timeBasedElement');
let currentHour = new Date().getHours();

if (currentHour >= 6 && currentHour < 12) {
    element.style.borderTop = '5px solid green'; // Ранковий бордюр
} else if (currentHour >= 12 && currentHour < 18) {
    element.style.borderTop = '5px solid blue'; // Денний бордюр
} else {
    element.style.borderTop = '5px solid red'; // Вечірній бордюр
}