Меняю цвет элемента из JS, а ничего не происходит — что не так со style?
Хочу по клику сделать у блока красный фон. Пишу так, но цвет не меняется:
const box = document.getElementById('box');
box.style = 'red';
Или пробовал box.style.background-color = 'red' — вообще ошибка. Как правильно менять стиль из JS?
2 ответа
Две типичные ошибки сразу:
1. Нельзя присвоить весь style строкой так. Нужно обращаться к конкретному свойству:
box.style.backgroundColor = 'red';
2. CSS-свойства с дефисом в JS пишутся в camelCase. background-color → backgroundColor, font-size → fontSize, margin-top → marginTop. Дефис в JS — это минус, поэтому имя превращают в camelCase.
Рабочий пример:
document.getElementById('box').addEventListener('click', function() {
this.style.backgroundColor = 'red';
this.style.fontSize = '20px';
});
Значения — строки, как в CSS: 'red', '20px', '#1e1e1e'.
Если стилей много, удобнее не выставлять их по одному, а описать класс в CSS и переключать его:
.active { background: red; font-size: 20px; }
box.classList.add('active');
Так стили остаются в CSS (где им место), а JS только включает/выключает класс. Для одного-двух свойств подойдёт style, для оформления покрупнее — класс.