Стили и классы

classList управляет CSS-классами: add, remove, toggle. style задаёт инлайновые стили. Предпочтительнее управлять классами — стили остаются в CSS, а не в JavaScript.

Два способа менять внешний вид:

• classList — управление CSS-классами:

element.classList.add('active') — добавить класс element.classList.remove('active') — удалить класс element.classList.toggle('active') — переключить element.classList.contains('active') — проверить

// Добавить несколько: element.classList.add('btn', 'primary')

• style — инлайновые стили:

element.style.color = 'red'; element.style.fontSize = '20px'; element.style.backgroundColor = '#fff';

// Все стили сразу: element.style.cssText = 'color: red; font-size: 20px;';

Почему classList лучше:

• Стили остаются в CSS (разделение ответственности)
• Легче менять тему (поменять CSS, не JavaScript)
• CSS-классы переиспользуемы
• Инлайновые стили имеют высокую специфичность

getComputedStyle — чтение текущих стилей: const styles = getComputedStyle(element); console.log(styles.color); // 'rgb(255, 0, 0)' console.log(styles.fontSize); // '16px' // Возвращает вычисленные стили (с учётом наследования и CSS)

Специфичность:

• Инлайновые стили побеждают CSS-классы
• !important побеждает инлайновые
• Избегайте !important — он усложняет поддержку

classList — как набор наклеек на ноутбуке. Добавляете/снимаете наклейки, внешний вид меняется. style — как рисовать маркером прямо на ноутбуке. Эффект тот же, но менять сложнее.

**Самый простой:**

// Добавить/удалить класс:
const button = document.querySelector('button');
button.classList.add('active');
button.classList.remove('disabled');
button.classList.toggle('dark');

classList — управление классами. toggle переключает: есть — убирает, нет — добавляет.

**Простой:**

// Инлайновые стили:
const box = document.querySelector('.box');
box.style.width = '200px';
box.style.height = '100px';
box.style.backgroundColor = '#f0f0f0';
box.style.border = '1px solid #ccc';

// Прочитать вычисленный стиль:
const computed = getComputedStyle(box);
console.log(computed.width); // '200px'

style задаёт инлайновые стили. getComputedStyle читает текущее значение.

**Реальный пример:**

// Переключатель темы:
const themeToggle = document.querySelector('#themeToggle');

themeToggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');

  const isDark = document.body.classList.contains('dark-theme');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// Загрузить тему при старте:
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  document.body.classList.add('dark-theme');
}

classList.toggle + localStorage — стандартный паттерн переключателя темы.

**Неправильно:** Использовать style для всего

**Почему:** Инлайновые стили тяжело поддерживать — их сложно менять, они не кэшируются.

**Правильно:** Для стилей — CSS-классы. Для динамических значений — style.

**Неправильно:** Путать className и classList

**Почему:** className = 'btn primary' заменяет ВСЕ классы. classList.add — добавляет один.

**Правильно:** classList.add/remove/toggle — для управления отдельными классами.

**Неправильно:** Забывать camelCase для style

**Почему:** element.style.background-color — SyntaxError! Нужно: element.style.backgroundColor.

**Правильно:** CSS-свойства в style используют camelCase: fontSize, backgroundColor.

**Неправильно:** Использовать !important в JavaScript

**Почему:** element.style.setProperty('color', 'red', 'important') — плохая практика.

**Правильно:** Избегайте !important. Используйте более специфичные селекторы.

• classList.add/remove/toggle — управление классами
• style — инлайновые стили (для динамических значений)
• Предпочитайте классы инлайн-стилям
• getComputedStyle читает текущие вычисленные стили
• camelCase: backgroundColor, не background-color

Назад: Вы умеете создавать элементы и управлять ими (D6) — теперь вы знаете, как менять их внешний вид.

Вперёд: Следующий урок (D8) — загрузка документа: когда и как безопасно запускать JavaScript.