Как менять CSS-стили с помощью JavaScript?

Question

Accepted Answer

## Два основных пути

### 1. Инлайн через `element.style`

```js
document.getElementById("myDiv").style.backgroundColor = "blue";
```

Имена в camelCase: `background-color` → `backgroundColor`.

### 2. Классы через `classList` (предпочтительно)

```js
const el = document.getElementById("myDiv");
el.classList.add("newClass");
el.classList.remove("oldClass");
el.classList.toggle("toggleClass");
```

---

## Что выбрать

| Подход | Когда |
|---|---|
| `classList` | Состояния UI, темы, анимации из CSS |
| `style.*` | Разовые вычисленные значения (координаты, цвет из данных) |
| CSS variables | `el.style.setProperty("--x", value)` |

Сеньор держит визуальные правила в CSS, а JS переключает классы/переменные.

**Итог:** точечно — `style`, системно — классы и CSS; так проще поддерживать и тестировать.

Подход	Когда
`classList`	Состояния UI, темы, анимации из CSS
`style.*`	Разовые вычисленные значения (координаты, цвет из данных)
CSS variables	`el.style.setProperty("--x", value)`