Динамическое управление стилями элементов с помощью JavaScript

Расширенные примеры манипуляции стилями

1. Анимация с помощью переключения классов

Создадим простой переключатель, который при клике добавляет или удаляет класс, изменяющий внешний вид элемента.

HTML:
<button id="toggleBtn">Активировать</button>
<div id="target" class="box">Меняю цвет</div>

CSS:
.box { width: 150px; height: 150px; background: gray; transition: background 0.3s; }
.box.active { background: #2ecc71; transform: scale(1.1); }

JavaScript:
const btn = document.getElementById('toggleBtn');
const target = document.getElementById('target');

btn.addEventListener('click', () => {
  target.classList.toggle('active');
  btn.textContent = target.classList.contains('active') ? 'Деактивировать' : 'Активировать';
});

Результат: при каждом клике на кнопку элемент плавно меняет фон с серого на зеленый и увеличивается, а текст кнопки меняется.

2. Изменение CSS-переменных для переключения темы

Реализуем переключение между светлой и тёмной темой с помощью CSS-переменных.

CSS (в корне):
:root {
  --bg: white;
  --text: black;
  --accent: #007bff;
}
body { background: var(--bg); color: var(--text); }
button { background: var(--accent); }

JavaScript:
const root = document.documentElement;
const themeToggle = document.getElementById('themeSwitch');

themeToggle.addEventListener('click', () => {
  const currentBg = getComputedStyle(root).getPropertyValue('--bg').trim();
  if (currentBg === 'white') {
    root.style.setProperty('--bg', '#333');
    root.style.setProperty('--text', '#f0f0f0');
    root.style.setProperty('--accent', '#ffc107');
  } else {
    root.style.setProperty('--bg', 'white');
    root.style.setProperty('--text', 'black');
    root.style.setProperty('--accent', '#007bff');
  }
});

Результат: при нажатии на кнопку цвета фона, текста и акцента меняются по всей странице, не затрагивая инлайн-стили.

3. Применение инлайн-стилей к коллекции элементов

Допустим, нужно подсветить все элементы с определённым классом, задав им прозрачный фон.

const items = document.querySelectorAll('.list-item');
items.forEach((item, index) => {
  item.style.backgroundColor = index % 2 === 0 ? '#e8f5e9' : '#fff3e0';
  item.style.borderRadius = '8px';
  item.style.padding = '10px';
});

Результат: каждый второй элемент получает зелёный фон, остальные – оранжевый, добавлены скругления и отступы.

4. Чтение вычисленных стилей и проверка свойства

Используем getComputedStyle для получения фактического цвета элемента и сравнения с ожидаемым.

const block = document.querySelector('.warning');
const blockStyles = window.getComputedStyle(block);
const bgColor = blockStyles.backgroundColor;
console.log(bgColor); // например, "rgb(255, 0, 0)"

if (bgColor === 'rgb(255, 0, 0)') {
  console.log('Фон красный');
} else {
  block.style.backgroundColor = 'red';
}

Результат: в консоль выводится текущий фоновый цвет элемента. Если он не красный, цвет принудительно устанавливается.

5. Динамическое добавление CSS-правила через insertRule

Создадим новое правило, которое применяет градиент к элементам с классом .gradient-box.

// Получаем первую таблицу стилей (обычно встроенная)
const styleSheet = document.styleSheets[0];

// Добавляем правило в конец
styleSheet.insertRule('.gradient-box { background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; }', styleSheet.cssRules.length);

// Проверяем, что правило добавлено
console.log(styleSheet.cssRules[styleSheet.cssRules.length - 1].cssText);

Результат: все элементы с классом gradient-box на странице немедленно получают градиентный фон и белый текст. Правило видно в инспекторе.

6. Комбинация classList и style для анимации при наведении

Скрываем элемент плавно, используя класс для opacity и style для задержки.

const tooltip = document.getElementById('myTooltip');

tooltip.addEventListener('mouseenter', () => {
  tooltip.style.transition = 'opacity 0.5s';
  tooltip.classList.remove('hidden');
});

tooltip.addEventListener('mouseleave', () => {
  tooltip.classList.add('hidden');
  // Через 500ms изменяем visibility (уже невидимый)
  setTimeout(() => {
    if (tooltip.classList.contains('hidden')) {
      tooltip.style.visibility = 'hidden';
    }
  }, 500);
});

Результат: при наведении тултип появляется с анимацией opacity, при уходе исчезает и затем скрывается из потока через visibility.