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

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

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

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

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

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

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

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

<script>
  function changeBackground() {
    let element = document.getElementById('myDiv');
    element.style.background = 'lightblue';
  }
</script>

</body>
</html>

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

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

let element = document.getElementById('myDiv');
let color = document.getElementById('colorInput').value;
element.style.background = color;

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

Також, background дозволяє встановлювати складніші значення, включаючи фонові зображення. Наприклад:

let element = document.getElementById('myDiv');
element.style.background = 'url("background.jpg") no-repeat center center';
element.style.backgroundSize = 'cover';

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

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

let element = document.getElementById('myDiv');
element.style.background = 'linear-gradient(to right, red, yellow)';

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

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

автор: Bond

Порада: Не забувайте про успадкування стилів у CSS. Якщо ви встановили background на батьківському елементі, його дочірні елементи успадкують це значення, якщо не перевизначити його явно. Це може бути корисно для швидкого застосування одного фонового стилю до групи елементів.
автор: Bond
Порада: Значення background можна встановити у форматі CSS, включаючи кольори в шістнадцятковому вигляді, RGB або назви кольорів. Наприклад: element.style.background = "#ff0000" або element.style.background = "rgb(255,0,0)". Для фонових зображень використовуйте url(), наприклад: element.style.background = "url('image.jpg')".
автор: Bond
Порада: background перезаписує всі попередні значення фону для елемента. Якщо потрібно додати кілька фонових зображень або градієнтів, використовуйте синтаксис CSS, наприклад: element.style.background = "linear-gradient(to right, red, yellow), url('image.jpg')". Пам'ятайте, що це може спричинити проблеми з продуктивністю для складних фонів.
автор: Bond

Синтаксис

element.style.background

Переглядачі

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

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

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

Приклади

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

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

HTML

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

// Отримуємо елемент div з id="myDiv"
const myDiv = document.getElementById('myDiv');

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

автор: Bond

У цьому прикладі ми отримуємо всі елементи div з класом 'tile' та встановлюємо для кожного з них випадковий колір фону, використовуючи element.style.background. Ми також додаємо ефект плавного переходу кольору та змінюємо колір фону на новий випадковий колір при наведенні курсору на кожен tile. Цей приклад демонструє використання element.style.background для створення інтерактивних візуальних ефектів на веб-сторінці.

HTML

<div class="tile">перший елемент tile</div>
<div class="tile">другий елемент tile</div>

// Отримуємо всі елементи div з класом "tile"
const tiles = document.querySelectorAll('.tile');

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

// Встановлюємо випадковий колір фону для кожного tile
tiles.forEach(tile => {
  tile.style.background = getRandomColor(); // Встановлюємо випадковий колір
  tile.style.transition = 'background 0.5s'; // Додаємо плавний перехід кольору

  // Змінюємо колір фону при наведенні курсору
  tile.addEventListener('mouseenter', () => {
    tile.style.background = getRandomColor();
  });
});

автор: Bond

У цьому прикладі ми демонструємо використання element.style.background для встановлення кольору фону та фонового зображення для елемента div з класом color-box. Користувач може вибрати колір за допомогою input типу color, а також завантажити зображення за допомогою input типу file. При зміні значення в одному з цих полів, відповідне значення background встановлюється для color-box за допомогою JavaScript.

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!