Изменение CSS средствами JavaScript: от classList до CSSOM

Пример 1. Анимация через requestAnimationFrame с инлайн-стилями (transform)

Создание плавного движения элемента без CSS-анимации. Изменяем свойство transform в каждом кадре.

const box = document.getElementById('animated-box');
let position = 0;
let direction = 1;

function animate() {
  position += direction;
  if (position > 300 || position < 0) direction *= -1;
  box.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
  

Результат: элемент плавно перемещается вправо-влево, синхронизируясь с частотой обновления экрана.
  

Пример 2. Динамическое создание графика ширины с CSS-переменными

Изменение ширины столбцов диаграммы через JS-установку кастомного свойства.

/* CSS */
.bar {
  width: var(--width);
  height: 20px;
  background: steelblue;
  transition: width 0.3s;
}

// JavaScript
const bars = document.querySelectorAll('.bar');
const data = [40, 75, 120, 200];
bars.forEach((bar, i) => {
  bar.style.setProperty('--width', data[i] + 'px');
});
  

Результат: каждый столбец получает свою ширину, заданную через переменную. Значения можно менять в реальном времени, вызывая повторный setProperty.
  

Пример 3. Добавление стиля для псевдоэлемента через CSSOM

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

const sheet = document.styleSheets[0];
const rule = `.my-element::after {
  content: "⚡";
  font-size: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}`;
try {
  sheet.insertRule(rule, sheet.cssRules.length);
} catch (e) {
  console.error('Невозможно добавить правило:', e);
}
  

Результат: на странице появляется псевдоэлемент ::after с заданным содержимым. Изменение правила можно выполнять многократно - ранее добавленное правило переопределить удалением (sheet.deleteRule(index)).
  

Пример 4. Динамическая смена медиа-запроса через JavaScript

Изменение стиля в зависимости от ширины окна или ориентации устройства, но не через CSS, а через программное добавление правила в медиа-блок таблицы стилей.

const sheet = document.styleSheets[0];
const mediaQuery = '(max-width: 600px)';
const newRule = 'body { font-size: 14px; }';

// Создаём или получаем существующую медиа-группу
const mediaIndex = Array.from(sheet.cssRules).findIndex(
  rule => rule.media && rule.media.mediaText === mediaQuery
);

if (mediaIndex !== -1) {
  // Добавляем правило внутрь существующей медиа-группы
  sheet.cssRules[mediaIndex].insertRule(newRule, sheet.cssRules[mediaIndex].cssRules.length);
} else {
  // Создаём новую медиа-группу
  const idx = sheet.insertRule(`@media ${mediaQuery} { ${newRule} }`, sheet.cssRules.length);
}
  

Результат: при ширине окна менее 600px размер шрифта увеличивается. Правило существует только в рамках данной таблицы стилей - при её удалении или перезагрузке страницы стили возвращаются к исходным.
  

Пример 5. Использование getComputedStyle для чтения финальных стилей

Иногда нужно узнать итоговый стиль элемента (учитывая каскад), например, для анимации или расчётов. getComputedStyle возвращает объект стилей с реальными значениями.

const div = document.querySelector('.styled-div');
const computed = getComputedStyle(div);
const bgColor = computed.backgroundColor; // 'rgb(255, 0, 0)'
const fontSize = computed.fontSize;       // '20px' (в пикселях)
console.log(`Фон: ${bgColor}, шрифт: ${fontSize}`);
  

Результат: в консоли выводятся реальные значения, даже если в CSS было задано 'red' или '1.2em'. Это полезно для проверки после применения классов.
  

Пример 6. Удаление всех инлайн-стилей через style.cssText

Полный сброс инлайн-стилей элемента: присвоение пустой строки удаляет все inline-свойства.

const element = document.getElementById('reset-me');
element.style.cssText = '';
// эквивалентно: удалить весь атрибут style
  

После выполнения элемент выглядит так, как будто style вообще не был задан. Классовые стили остаются.