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

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

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

Ця властивість дозволяє вам змінювати колір верхнього бордюру елемента за допомогою JavaScript, що може бути корисно для створення динамічних і інтерактивних веб-сторінок. Значенням цієї властивості може бути будь-який допустимий колір в CSS: назви кольорів (наприклад, "red"), HEX-коди (наприклад, "#ff0000"), RGB (наприклад, "rgb(255,0,0)") або HSL (наприклад, "hsl(0, 100%, 50%)").

Встановлювати значення borderTopColor можна наступним чином:

let element = document.getElementById('myElement');
element.style.borderTopColor = 'blue';

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

element.style.borderTopColor = '#ff6347'; // Використання HEX-коду
element.style.borderTopColor = 'rgb(123, 104, 238)'; // Використання RGB
element.style.borderTopColor = 'hsl(240, 100%, 50%)'; // Використання HSL

Щоб зчитати поточне значення borderTopColor, просто зверніться до цієї властивості:

let currentColor = element.style.borderTopColor;
console.log(currentColor); // Виведе значення кольору або порожній рядок, якщо колір не встановлено

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

element.addEventListener('mouseover', function() {
    element.style.borderTopColor = 'green';
});
element.addEventListener('mouseout', function() {
    element.style.borderTopColor = 'black';
});

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

Інший приклад - змінювати колір бордюру в залежності від значення форми:

let input = document.getElementById('colorInput');
input.addEventListener('change', function() {
    element.style.borderTopColor = input.value;
});

Цей код змінює колір верхнього бордюру відповідно до значення, введеного в форму.

Також можна використовувати borderTopColor для створення адаптивних інтерфейсів, які змінюються у залежності від розміру вікна:

window.addEventListener('resize', function() {
    if (window.innerWidth < 600) {
        element.style.borderTopColor = 'orange';
    } else {
        element.style.borderTopColor = 'purple';
    }
});

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

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

правити

Порада

Для плавних переходів між кольорами використовуйте CSS-транзішни (transition). Це створить більш приємний візуальний досвід для користувача. Наприклад, задайте стиль у CSS:

element {
    transition: border-top-color 0.5s ease;
}

А потім змінюйте колір у JavaScript:

element.style.borderTopColor = 'blue';

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

Порада

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

if (element.style.borderTopColor !== 'red') {
    element.style.borderTopColor = 'red';
}

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

Порада

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

let input = document.getElementById('colorInput');
input.addEventListener('input', function() {
    element.style.borderTopColor = input.value;
});

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

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

Синтаксис

element.style.borderTopColor

Переглядачі

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

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

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

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

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

Приклади

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

<div id="interactiveElement">Демонстраційний елемент</div>
<div class="colorButton">перший елемент colorButton</div>
<div class="colorButton">другий елемент colorButton</div>

let element = document.getElementById('interactiveElement');
let buttons = document.querySelectorAll('.colorButton');

buttons.forEach(button => {
    button.addEventListener('click', function() {
        let color = this.getAttribute('data-color');
        element.style.borderTopColor = color;
    });
});

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

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

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