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

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

element.style.borderLeftColor — це властивість, яка дозволяє змінювати або встановлювати колір лівої рамки елемента.

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

Для встановлення значення borderLeftColor, використовуйте наступний синтаксис:

element.style.borderLeftColor = 'значення';

Наприклад, щоб встановити ліву рамку червоного кольору, ви можете використати такий код:

let element = document.getElementById('myElement');
element.style.borderLeftColor = 'red';

Це встановить колір лівої рамки елемента з ідентифікатором myElement як червоний.

Якщо потрібно встановити колір рамки за допомогою HEX-значення, використовуйте наступний код:

element.style.borderLeftColor = '#00FF00';

Цей код встановить ліву рамку елемента зеленого кольору.

Для використання RGB-значень, застосовуйте такий синтаксис:

element.style.borderLeftColor = 'rgb(0, 0, 255)';

Цей приклад змінює колір лівої рамки на синій.

Застосування HSL-значень також можливе:

element.style.borderLeftColor = 'hsl(120, 100%, 50%)';

Цей код встановлює колір лівої рамки елемента як насичений зелений.

Ви можете динамічно змінювати колір рамки в залежності від взаємодії користувача з елементом. Наприклад, можна змінювати колір рамки при наведенні курсора миші:

element.addEventListener('mouseover', () => {
    element.style.borderLeftColor = 'orange';
});
element.addEventListener('mouseout', () => {
    element.style.borderLeftColor = 'black';
});

Цей код змінює колір лівої рамки на оранжевий при наведенні миші та повертає її до чорного кольору при відведенні миші.

Якщо потрібно зберегти початковий колір рамки перед зміною, ви можете використати властивість getComputedStyle для отримання поточного значення:

let originalColor = getComputedStyle(element).borderLeftColor;
element.style.borderLeftColor = 'purple';
// Повернути початковий колір
element.style.borderLeftColor = originalColor;

Це корисно для тимчасових змін стилів або при реалізації ефектів, які потребують відновлення початкових параметрів.

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

правити

Порада

Комбінуйте borderLeftColor з анімаціями для створення плавних переходів кольору. Використовуйте CSS-властивість transition для додавання ефекту плавної зміни кольору рамки при зміні стану елемента:

element.style.transition = 'border-left-color 0.5s ease';
element.addEventListener('click', () => {
    element.style.borderLeftColor = 'green';
});

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

Порада

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

let input = document.getElementById('myInput');
input.addEventListener('input', () => {
    if (input.value === '') {
        input.style.borderLeftColor = 'red';
    } else {
        input.style.borderLeftColor = 'green';
    }
});

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

Порада

Змінюйте borderLeftColor на основі взаємодії користувача для поліпшення UX. Наприклад, змінюйте колір рамки при фокусуванні на елементі форми:

let input = document.getElementById('myInput');
input.addEventListener('focus', () => {
    input.style.borderLeftColor = 'blue';
});
input.addEventListener('blur', () => {
    input.style.borderLeftColor = 'gray';
});

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

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

Синтаксис

element.style.borderLeftColor

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

function setTemperatureBorderColor(temp) {
    if (temp < 0) {
        element.style.borderLeftColor = 'blue';
    } else if (temp >= 0 && temp < 15) {
        element.style.borderLeftColor = 'cyan';
    } else if (temp >= 15 && temp < 25) {
        element.style.borderLeftColor = 'green';
    } else if (temp >= 25 && temp < 35) {
        element.style.borderLeftColor = 'orange';
    } else {
        element.style.borderLeftColor = 'red';
    }
}

// Приклад використання функції з температурою
let currentTemperature = 22; // Це значення може бути отримане з API погоди
setTemperatureBorderColor(currentTemperature);

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

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

function updateBorderColor() {
    let currentHour = new Date().getHours();
    if (currentHour >= 6 && currentHour < 12) {
        element.style.borderLeftColor = 'yellow'; // Ранок
    } else if (currentHour >= 12 && currentHour < 18) {
        element.style.borderLeftColor = 'orange'; // День
    } else if (currentHour >= 18 && currentHour < 21) {
        element.style.borderLeftColor = 'red'; // Вечір
    } else {
        element.style.borderLeftColor = 'blue'; // Ніч
    }
}

updateBorderColor();
setInterval(updateBorderColor, 60000); // Оновлювати кожну хвилину