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 для індикації змін у формі або даних. Наприклад, ви можете змінювати колір лівої рамки, щоб вказати на помилку в полі вводу:

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

Порада:

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

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

Порада:

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

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

Синтаксис

element.style.borderLeftColor

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад дозволяє користувачам змінювати колір лівої рамки елемента за допомогою кольорового інпуту. Користувач може вибрати будь-який колір з палітри, і колір негайно застосовується до лівої рамки елемента, що робить взаємодію з елементом інтуїтивною та візуально привабливою.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/zYQpZZZ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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); // Оновлювати кожну хвилину

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

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

JS довідник

JavaScript

Наповнення JS розділу

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади