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

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

backgroundColor є властивістю об'єкта style, що належить до будь-якого HTML-елемента. Ця властивість дозволяє встановлювати або отримувати колір фону елемента за допомогою JavaScript. Основна суть backgroundColor полягає у можливості динамічно змінювати колір фону елемента залежно від дій користувача або інших умов, що робить її дуже корисною у веб-розробці для створення інтерактивних та адаптивних інтерфейсів користувача.

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

Використання backgroundColor можна розглянути на кількох прикладах від найпростіших до складніших.

Розглянемо простий приклад, де ми змінюємо колір фону елемента за допомогою кнопки:

<!DOCTYPE html>
<html>
<head>
<style>
  #myDiv {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    background-color: lightblue;
  }
</style>
</head>
<body>

<div id="myDiv">Це див</div>
<button onclick="changeBackgroundColor()">Змінити колір фону</button>

<script>
  function changeBackgroundColor() {
    let element = document.getElementById('myDiv');
    element.style.backgroundColor = 'yellow';
  }
</script>

</body>
</html>

У цьому прикладі, коли користувач натискає кнопку, викликається функція changeBackgroundColor, яка змінює колір фону елемента з id="myDiv" на жовтий.

Далі розглянемо приклад, де колір фону змінюється на основі даних, введених користувачем:

<div id="myDiv">Це див</div>
<input type="text" id="colorInput" placeholder="Введіть колір">
<button onclick="changeBackgroundColor()">Змінити колір фону</button>

<script>
  function changeBackgroundColor() {
    let element = document.getElementById('myDiv');
    let color = document.getElementById('colorInput').value;
    element.style.backgroundColor = color;
  }
</script>

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

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

<div id="myDiv">Це див</div>
<form oninput="updateBackgroundColor()">
  <label for="colorInput">Виберіть колір:</label>
  <input type="color" id="colorInput" name="color">
</form>

<script>
  function updateBackgroundColor() {
    let element = document.getElementById('myDiv');
    let color = document.getElementById('colorInput').value;
    element.style.backgroundColor = color;
  }
</script>

У цьому прикладі колір фону елемента змінюється в режимі реального часу, коли користувач вибирає колір за допомогою елемента форми input типу color.

Нарешті, розглянемо приклад, де колір фону змінюється в циклі з використанням масиву кольорів та таймера:

let element = document.getElementById('myDiv');
let colors = ['lightblue', 'lightgreen', 'lightcoral', 'lightgoldenrodyellow'];
let index = 0;
setInterval(function() {
  element.style.backgroundColor = colors[index];
  index = (index + 1) % colors.length;
}, 1000);

У цьому прикладі кнопка запускає цикл зміни кольору фону кожну секунду з використанням масиву кольорів та функції setInterval.

Таким чином, властивість backgroundColor є потужним інструментом для динамічного керування кольором фону HTML-елементів за допомогою JavaScript. Це дозволяє розробникам створювати інтерактивні та адаптивні інтерфейси користувача, які реагують на дії користувачів та інші умови в реальному часі.

Порада:

Пам'ятайте про наслідування стилів. Якщо ви змінюєте колір фону одного елемента, це може вплинути на видимість тексту чи інших елементів всередині нього. Переконайтеся, що кольори контрастують достатньо, щоб забезпечити читабельність та зручність використання. Наприклад, якщо фон темний, використовуйте світлий колір тексту: element.style.color = 'white';.

Порада:

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

button.addEventListener('click', function() {
  element.style.backgroundColor = 'lightblue';
});

Порада:

Оптимізуйте код, використовуючи класи CSS для частих змін. Замість прямого встановлення кольорів через backgroundColor кожного разу, створіть класи CSS з необхідними кольорами та додайте або видаляйте їх за потреби. Це допоможе зберегти код чистим і зрозумілим. Наприклад, додайте клас для зміни кольору:

.bg-yellow { background-color: yellow; }

та змініть клас елемента у JavaScript:

element.classList.add('bg-yellow');

Синтаксис

element.style.backgroundColor

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми демонструємо використання backgroundColor для встановлення кольору фону елемента div з класом color-box. Користувач може вибрати колір за допомогою input типу color, а потім застосувати вибраний колір до елемента, натиснувши кнопку "Застосувати колір".

Коли користувач натискає кнопку, JavaScript-код отримує значення вибраного кольору з input та встановлює його як колір фону для елемента color-box, використовуючи colorBox.style.backgroundColor.

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ExzWEbe">
  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>.

У цьому прикладі ми отримуємо доступ до елемента div за його id та встановлюємо червоний колір фону, використовуючи властивість backgroundColor. Це найпростіший спосіб динамічно змінити колір фону елемента за допомогою JavaScript.

<div id="myDiv">Це елемент div</div>

<script>
const myDiv = document.getElementById('myDiv');

// Встановлюємо червоний колір фону для div
myDiv.style.backgroundColor = 'red';
</script>

У цьому прикладі ми маємо елемент div з id="box" та кнопку з id="changeColor". Коли користувач натискає кнопку, ми генеруємо випадковий колір за допомогою функції getRandomColor() та встановлюємо його як колір фону для елемента box, використовуючи box.style.backgroundColor.

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

<div id="container">
  <button id="changeColor">Змінити колір фону</button>
  <div id="box">Це елемент div</div>
</div>

<script>
const box = document.getElementById('box');
const changeColorBtn = document.getElementById('changeColor');

// Функція для генерування випадкового кольору
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Обробник події для кнопки
changeColorBtn.addEventListener('click', () => {
  const randomColor = getRandomColor();
  box.style.backgroundColor = randomColor;
});
</script>

JS довідник

JavaScript

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

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

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

Синтаксис

Значення

Return

Переглядачі

Приклади