Как управлять стилями элемента через JavaScript?
Нужно по клику менять цвет, скрывать/показывать блок, добавлять подсветку. Понимаю, что это делается из JS, но не уверен, через что правильнее — напрямую style или как-то через классы?
2 ответа
Есть два основных подхода, и второй обычно предпочтительнее.
1. Напрямую через element.style — меняем инлайновые стили:
const box = document.querySelector('.box');
box.style.color = 'white';
box.style.backgroundColor = '#6366f1'; // camelCase вместо background-color!
box.style.display = 'none';
Минус: свойства через дефис пишутся в camelCase, а стили лезут прямо в разметку.
2. Через classList — переключаем классы, а оформление держим в CSS. Это чище:
.active { background: #6366f1; color: white; }
.hidden { display: none; }
box.classList.add('active');
box.classList.remove('hidden');
box.classList.toggle('active'); // вкл/выкл
box.classList.contains('active'); // проверка
Правило: разовая динамическая величина (например, left при перетаскивании) — style. Любое «состояние» (активна/выбрана/скрыта) — classList + класс в CSS. Так логика и оформление не перемешиваются.
Ещё момент про чтение стилей: element.style.color вернёт значение, только если оно задано инлайново. Чтобы узнать итоговый вычисленный стиль (например, из CSS-файла), используй:
const color = getComputedStyle(box).color;
Новички часто удивляются, почему box.style.width пустой, хотя ширина явно задана — она просто пришла из CSS, а не из атрибута style.
