Коротко: изменить CSS из JavaScript можно тремя способами: через инлайн-стили элемента (element.style), через добавление и удаление классов (classList), и через CSS-переменные (setProperty). Первый — точечно, второй — предпочтительно, третий — для «глобальных» настроек вроде темы.
Три способа
| Способ | Плюсы | Минусы |
|---|---|---|
element.style |
быстро и просто | инлайн-стили, сложно поддерживать |
classList |
стили в CSS, логика в JS | нужны заранее описанные классы |
setProperty |
управление токенами/темой | нужны CSS-переменные |
Вкладки: примеры
const el = document.querySelector('.card');
el.style.background = '#003F8F';
el.style.borderRadius = '12px'; // camelCase!
el.style.setProperty('font-size', '18px');Свойства CSS пишут в camelCase: background-color → backgroundColor. Для свойств с дефисом удобнее setProperty().
const menu = document.querySelector('.menu');
menu.classList.toggle('is-open');
menu.classList.add('is-active');
menu.classList.remove('is-hidden');/* стили живут в CSS */
.menu.is-open { max-height: 400px; opacity: 1; }Рекомендуемый способ: JS только «переключает состояние», а как выглядит состояние — решает CSS. Так код проще поддерживать и тестировать.
// переключить тему
document.documentElement.style.setProperty('--brand', '#992222');
// сбросить к значению из CSS
document.documentElement.style.removeProperty('--brand');:root { --brand: #003F8F; }
.btn { background: var(--brand); }Идеально для тёмной темы и «акцентного» цвета: меняете одну переменную — обновляется весь сайт.
const sheet = document.styleSheets[0];
sheet.insertRule('.new-class { color: red; }', sheet.cssRules.length);CSSOM (объектная модель стилей) позволяет добавлять правила целиком. Это нужно редко — например, для генерации стилей «на лету». Для обычных задач хватает классов и переменных.
element.style, перебивает CSS-классы. Если потом «правки не применяются» — проверьте, не остался ли инлайн-стиль. Для сброса используйте el.style.removeProperty('background').Практика: меню на JavaScript
- В CSS опишите состояния:
.menuи.menu.is-open. - В JS повесьте обработчик на кнопку.
- Переключайте класс:
menu.classList.toggle('is-open'). - Не задавайте стили напрямую в JS.
- Проверьте доступность:
aria-expandedдля кнопки.
button.addEventListener('click', () => {
menu.classList.toggle('is-open');
button.setAttribute('aria-expanded', menu.classList.contains('is-open'));
});Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стиль «не тот» | camelCase или дефис | backgroundColor / setProperty |
| Класс не работает | правила нет в CSS | описать состояние |
| Не применяется правка | старый инлайн-стиль | removeProperty() |
| Дёргается при скролле | частые изменения стиля | переключать класс, а не стили |
Проверьте себя
Вопросы и ответы
Потому что в JS дефис нельзя использовать в имени свойства — его пишут camelCase. Или применяют setProperty('background-color', ...).
Классовое переключение обычно эффективнее и предсказуемее: браузер сам применяет набор стилей, а код остаётся чистым.
Поменяйте CSS-переменную на :root — все правила с var() обновятся. Либо добавьте класс контейнеру и опишите вариант в CSS.
Да, но плавность задавайте в CSS (transition), а JS только переключайте класс. Ручное изменение стилей в цикле анимации тормозит.
Итоги
element.style— точечно; имена в camelCase.classList— предпочтительный способ; правила в CSS.setProperty— для тем и токенов через CSS-переменные.- Инлайн-стили перебивают классы — не злоупотребляйте ими.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.