style: инлайн-стили через JS

element.style — объект CSSStyleDeclaration, позволяющий читать и устанавливать инлайн-стили элемента напрямую из JavaScript.

Зачем нужно

Инлайн-стили через JS нужны для динамических, вычисляемых значений, которые нельзя задать заранее в CSS: координаты из JS, цвета из пользовательского ввода, CSS-переменные. Для переключения состояний лучше использовать classList; element.style — для конкретных вычисленных значений.

Где используется

  • Позиционирование элементов (drag-and-drop, тултипы, модалки)
  • CSS-переменные для динамических тем и конфигураций
  • Анимации с точными вычисленными значениями
  • Прогресс-бары, слайдеры — установка width или --value

Синтаксис: CSS → JS (camelCase)

CSS JS (element.style)
background-color backgroundColor
font-size fontSize
z-index zIndex
border-top-left-radius borderTopLeftRadius

Примеры

Базовые операции

const box = document.querySelector('.box');

// Установить стиль
box.style.backgroundColor = '#3498db';
box.style.width = '200px';
box.style.fontSize = '1.5rem';
box.style.display = 'none'; // скрыть

// Прочитать инлайн-стиль
console.log(box.style.backgroundColor); // '#3498db' или ''

// Удалить инлайн-стиль (вернуть к CSS)
box.style.backgroundColor = '';

// Установить несколько через cssText
box.style.cssText = 'color: red; font-size: 18px; margin: 0';

Позиционирование (drag-and-drop)

const draggable = document.querySelector('.draggable');
let startX, startY;

draggable.addEventListener('mousedown', (e) => {
  startX = e.clientX - draggable.offsetLeft;
  startY = e.clientY - draggable.offsetTop;

  document.addEventListener('mousemove', onMove);
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', onMove);
  }, { once: true });
});

function onMove(e) {
  draggable.style.left = `${e.clientX - startX}px`;
  draggable.style.top  = `${e.clientY - startY}px`;
}

CSS-переменные через setProperty

// CSS: .theme { --primary: blue; }
const root = document.documentElement;

// Установить CSS-переменную
root.style.setProperty('--primary', '#e74c3c');
root.style.setProperty('--font-size-base', '18px');

// Прочитать CSS-переменную
const primary = getComputedStyle(root).getPropertyValue('--primary').trim();
console.log(primary); // '#e74c3c'

// Удалить
root.style.removeProperty('--primary');

getComputedStyle — итоговые стили

// element.style читает ТОЛЬКО инлайн-стили
// getComputedStyle возвращает итоговые (после CSS-каскада) стили
const el = document.querySelector('.item');
const computed = getComputedStyle(el);

console.log(computed.color);        // 'rgb(51, 51, 51)'
console.log(computed.fontSize);     // '16px'
console.log(computed.display);      // 'block'

Частые ошибки

  • Читать стиль через element.style, если он задан в CSS — element.style возвращает пустую строку для стилей из таблицы стилей; используйте getComputedStyle.
  • Числовые значения без единиц — box.style.width = 200 не работает; нужно '200px'.
  • Злоупотреблять инлайн-стилями вместо CSS-классов — для переключения состояний используйте classList; инлайн-стили трудно переопределить в CSS.

Связанные темы

Ресурсы