Стили и classList

Свойство style — это не «все стили элемента», а ровно тот текст, который лежит в его атрибуте style. Отсюда два следствия: имена пишутся в camelCase (background-color становится backgroundColor), а значение — всегда строка с единицами измерения. Число без px браузер молча выбросит.

const note = document.getElementById("note");

note.style.color = "crimson";
note.style.backgroundColor = "lemonchiffon";

note.style.fontSize = 24;
console.log(note.style.fontSize);

note.style.fontSize = "24px";
console.log(note.style.fontSize);
console.log(note.style.backgroundColor);

Записанное так правило перебивает почти всё, что скажет таблица стилей: инлайн-стиль сильнее любого селектора. Убрать его можно присвоением пустой строки — свойство исчезнет из атрибута, и элемент вернётся к тому, что описано в CSS. Именно поэтому style хорош для точечных правок: подставить посчитанную ширину, сдвинуть элемент на нужное число пикселей, показать процент прогресса.

const box = document.getElementById("box");

box.style.padding = "8px";
console.log(box.getAttribute("style"));

box.style.padding = ""; // снимаем правило
console.log(box.style.padding);
console.log(box.getAttribute("style"));

Если цвет пришёл из CSS-файла, element.style.color вернёт пустую строку — в атрибуте ведь ничего нет. Итоговое, реально применённое значение показывает getComputedStyle(element): браузер прогоняет все правила, наследование и единицы и отдаёт результат в пикселях и rgb().

Объект от getComputedStyle — только для чтения, и попытка записи не проходит молча, а бросает исключение: объект описывает, что получилось, а не что вы хотите. Меняют по-прежнему style или класс. Чем вычисленный стиль отличается от заданного, почему длины приходят пикселями и что показывает скрытый элемент — в следующей статье.

const card = document.getElementById("card");

console.log(card.style.display);
console.log(getComputedStyle(card).display);

card.style.display = "inline";
console.log(getComputedStyle(card).display);
console.log(card.style.display);

className — обычная строка, и добавить к ней класс, не сломав остальные, неудобно. classList — набор с понятными методами: add, remove, contains, toggle. add и remove принимают сколько угодно имён сразу, дубликаты не создаются, а удаление несуществующего класса не ошибка. А вот contains берёт ровно одно имя, и у toggle второй аргумент — не второе имя, а положение переключателя: toggle("open", "wide") не тронет wide, а намертво включит open.

const tab = document.getElementById("tab");

tab.classList.add("active", "wide");
console.log(tab.className);

tab.classList.add("tab");
console.log(tab.classList.length);

console.log(tab.classList.contains("wide"));
tab.classList.remove("wide", "missing");
console.log(tab.className);

toggle отличается тем, что возвращает результат: true, если класс в итоге на месте. А второй аргумент превращает переключатель в выключатель с заданным положением: toggle("open", isOpen) добавит класс при true и снимет при false. Это надёжнее, чем if с двумя ветками, потому что состояние класса выводится из данных, а не накапливается вручную.

const menu = document.getElementById("menu");
const panel = document.getElementById("panel");

menu.addEventListener("click", () => {
  console.log(panel.classList.toggle("open"));
});

menu.click();
menu.click();
console.log(panel.className);

Инлайн-стиль описывает внешний вид там же, где живёт логика, — и внешний вид перестаёт быть переиспользуемым. Класс, наоборот, это имя состояния: JS говорит «эта карточка выбрана», а как выглядит выбранная карточка и плавно ли она в этот вид переходит, решает CSS. Дизайнер меняет вид, не открывая ваш код.

Есть и пятый метод — replace: он меняет один класс на другой и возвращает false, если менять было нечего. Такой ответ — удобный признак того, что элемент оказался не в том состоянии, которое вы ожидали.

const banner = document.getElementById("banner");

console.log(banner.classList.replace("msg-info", "msg-error"));
console.log(banner.className);

console.log(banner.classList.replace("msg-warn", "msg-ok"));
console.log(banner.className);

const chip = document.getElementById("chip");

chip.style.color = "teal";
chip.style.cssText = "font-weight: bold";

console.log(chip.style.color);
console.log(chip.style.fontWeight);

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

Тёмная тема целой страницы — это один класс на корневом элементе. CSS заранее описывает оба варианта селекторами вроде .theme-dark .card, а JS остаётся одна строка. В настоящем проекте корень — это document.documentElement (тег <html>) и выбор темы обычно кладут в localStorage; в примере ниже роль корня играет обычный контейнер.

const app = document.getElementById("app");

const isDark = app.classList.toggle("theme-dark");
console.log(isDark);
console.log(app.className);

app.dataset.theme = isDark ? "dark" : "light";
console.log(app.getAttribute("data-theme"));

Второй приём того же семейства — CSS-переменные. Их нельзя записать как обычное свойство: style.someName знает только стандартные имена, а кастомные ставятся через setProperty и читаются через getPropertyValue. Одна переменная на корне перекрашивает всё, что на неё ссылается.

const panel = document.getElementById("panel");

panel.style["--accent"] = "red";
console.log(panel.style.getPropertyValue("--accent"));

panel.style.setProperty("--accent", "#e2725b");
console.log(panel.style.getPropertyValue("--accent"));
console.log(getComputedStyle(panel).getPropertyValue("--accent").trim());