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

Синтаксис

element.style.borderTopColor

Значення

Return

Переглядачі

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

Приклади

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

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

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