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

правити

Порада

Для динамічних інтерфейсів, які змінюються на основі взаємодії користувача, можна використовувати анімацію переходів CSS разом із borderTop у JavaScript. Це дозволяє створювати плавні анімації під час зміни стилю обведення. Задайте CSS-правило для переходу, а потім змінюйте властивість у JavaScript:

.element {
    transition: border-top 0.3s ease;
}

element.style.borderTop = '5px solid blue';

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

Порада

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

window.addEventListener('resize', function() {
    if (window.innerWidth < 600) {
        element.style.borderTop = '3px solid green';
    } else {
        element.style.borderTop = '2px solid black';
    }
});

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

Порада

Використовуйте element.style.borderTop для відображення повідомлень про помилки або інформаційних повідомлень на сторінці. Наприклад, ви можете змінювати обведення верхньої межі форми, коли користувач вводить некоректні дані:

if (!isValidInput) {
    formElement.style.borderTop = '3px solid red';
} else {
    formElement.style.borderTop = '3px solid green';
}

Це надає користувачам візуальну підказку про стан вводу.

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

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

Синтаксис

element.style.borderTop

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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'; // Додати бордюр для активного елемента
    });
});

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

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'; // Вечірній бордюр
}