Динамическая стилизация фона с помощью JavaScript

Расширенные примеры и нестандартные сценарии

Ниже приведены примеры, демонстрирующие более сложные и неочевидные способы управления фоном.

Плавное изменение фона с помощью requestAnimationFrame

Собственная анимация сглаживания между двумя цветами.

function parseColor(color) {
  const div = document.createElement('div');
  div.style.color = color;
  document.body.appendChild(div);
  const rgb = getComputedStyle(div).color;
  document.body.removeChild(div);
  return rgb.match(/\d+/g).map(Number);
}

function interpolateColor(start, target, progress) {
  const r = Math.round(start[0] + (target[0] - start[0]) * progress);
  const g = Math.round(start[1] + (target[1] - start[1]) * progress);
  const b = Math.round(start[2] + (target[2] - start[2]) * progress);
  return `rgb(${r},${g},${b})`;
}

function smoothBgChange(element, targetColor, duration) {
  const startColor = getComputedStyle(element).backgroundColor;
  const startTime = performance.now();
  const targetRGB = parseColor(targetColor);
  function step(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const currentColor = interpolateColor(parseColor(startColor), targetRGB, progress);
    element.style.backgroundColor = currentColor;
    if (progress < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

// Пример вызова:
smoothBgChange(document.body, 'rgb(0, 0, 255)', 2000);

Фон тела страницы плавно изменится с текущего на синий за 2 секунды. Промежуточные цвета интерполируются.

Генерация случайного цвета и установка фона

function randomRGB() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r},${g},${b})`;
}

document.getElementById('random-btn').addEventListener('click', () => {
  document.body.style.backgroundColor = randomRGB();
});

При каждом клике на кнопку с id 'random-btn' фон страницы меняется на случайный цвет.

Сохранение выбранного фона в localStorage и восстановление

// При загрузке восстанавливаем
const savedBg = localStorage.getItem('bgColor');
if (savedBg) document.body.style.backgroundColor = savedBg;

// Функция установки с сохранением
function setBg(color) {
  document.body.style.backgroundColor = color;
  localStorage.setItem('bgColor', color);
}

// Пример: setBg('#f0f0f0');

После вызова setBg с любым цветом, значение сохраняется в localStorage. При перезагрузке страницы фон автоматически восстанавливается.

Синхронизация фона между несколькими элементами через CSS-переменную

/* CSS */
.card { background: var(--card-bg, white); }
.header { background: var(--header-bg, gray); }

// JavaScript
document.documentElement.style.setProperty('--card-bg', 'lightblue');
document.documentElement.style.setProperty('--header-bg', 'darkblue');

Все элементы с классом .card получат фон lightblue, а .header - darkblue. Достаточно изменить переменные в одном месте.

Изменение фона внутри iframe

const iframe = document.getElementById('my-iframe');
iframe.addEventListener('load', () => {
  iframe.contentDocument.body.style.backgroundColor = 'yellow';
});

После загрузки iframe его фон становится жёлтым. Работает только для документов с того же источника (same-origin).

Фон из canvas (градиент или рисунок)

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 200;
const ctx = canvas.getContext('2d');

// Радиальный градиент
const gradient = ctx.createRadialGradient(200, 100, 50, 200, 100, 150);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#0000ff');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 400, 200);

document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;

Фон страницы заменяется изображением, сгенерированным на canvas - радиальный градиент.

Циклическое изменение фона с остановкой по клику

let intervalId = null;
let index = 0;
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

function startCycle() {
  if (intervalId) return;
  intervalId = setInterval(() => {
    document.body.style.backgroundColor = colors[index % colors.length];
    index++;
  }, 500);
}

function stopCycle() {
  clearInterval(intervalId);
  intervalId = null;
}

// При клике на кнопку .btn-start вызывать startCycle(), .btn-stop - stopCycle()

При запуске цикла фон перебирает все цвета радуги каждые 500 мс. Кнопка остановки прекращает изменение.