Классы, стили и атрибуты
Внешний вид меняют через классы
Чтобы элемент стал красным, большим или скрытым, удобнее всего не писать стили в JavaScript, а
заранее описать их в CSS под классом и из кода только включать или выключать этот класс. Так стили
остаются в CSS, а JS отвечает только за логику: «сейчас ошибка — добавь класс error».
classList
У каждого элемента есть classList — набор его классов с удобными методами:
const btn = document.querySelector("#buy");
btn.classList.add("active"); // добавить
btn.classList.remove("disabled"); // убрать
btn.classList.toggle("open"); // нет — добавить, есть — убрать
btn.classList.contains("active"); // true / false — есть ли класс
btn.classList.add("big", "primary"); // несколько сразу
toggle возвращает true, если после вызова класс есть, и false, если его убрали. У toggle
есть второй аргумент — условие: el.classList.toggle("error", age < 18) добавит класс, когда условие
истинно, и уберёт, когда ложно. Это избавляет от if/else с add и remove.
Есть ещё свойство className — все классы одной строкой. Записывая в него, ты заменяешь все
классы разом, поэтому для одного класса лучше classList.
Стили напрямую: style
Иногда значение заранее неизвестно — ширина полосы прогресса, координаты, цвет из настроек. Тогда
пишут в style прямо из кода:
const bar = document.querySelector("#progress");
bar.style.width = "40%";
bar.style.backgroundColor = "tomato"; // background-color → backgroundColor
bar.style.marginTop = "8px";
bar.style.width = ""; // убрать свой стиль, вернуть CSS
Правила две:
- CSS-свойства с дефисом пишутся в camelCase:
font-size→fontSize,z-index→zIndex. - Значение — строка с единицами:
"40%","120px". Число40без единиц дляwidthне сработает.
el.style показывает только стили, записанные в атрибут style (из JS или в HTML). Итоговый стиль
с учётом CSS-файлов можно узнать через getComputedStyle(el).width.
Скрыть и показать
Три популярных способа:
el.hidden = true; // атрибут hidden — элемент скрыт
el.hidden = false;
el.style.display = "none"; // скрыть стилем
el.style.display = ""; // вернуть как было в CSS
el.classList.add("hidden"); // класс, у которого в CSS display: none
Способ с классом самый гибкий: в CSS можно сделать плавное исчезновение, а в JS остаётся одна строчка.
Атрибуты
Любой атрибут из HTML можно прочитать и изменить:
const link = document.querySelector("a");
console.log(link.getAttribute("href")); // "/catalog"
link.setAttribute("href", "/sale");
link.setAttribute("target", "_blank");
link.removeAttribute("target");
console.log(link.hasAttribute("target")); // false
Для частых атрибутов есть готовые свойства: img.src, a.href, input.disabled, input.checked,
el.id. Логические атрибуты (disabled, checked, hidden) удобнее менять свойством:
btn.disabled = true.
Свои данные: data-атрибуты
Чтобы хранить в HTML свои данные (id товара, цену, категорию), используют атрибуты, начинающиеся с
data-. В JavaScript они доступны через dataset:
<li class="product" data-id="42" data-price="1990" data-in-stock="yes">Наушники</li>
const item = document.querySelector(".product");
console.log(item.dataset.id); // "42"
console.log(item.dataset.price); // "1990" — строка!
console.log(item.dataset.inStock); // "yes" — data-in-stock → inStock
item.dataset.price = "1490"; // атрибут в HTML тоже изменится
Дефисы в имени превращаются в camelCase, а значения — всегда строки (Number(...) для чисел).
Итог
- Внешний вид — через классы:
classList.add / remove / toggle / contains. toggle(класс, условие)— включить класс, только когда условие истинно.style.свойство = "значение с единицами"— для значений, которые считаются в коде.- Атрибуты:
getAttribute,setAttribute,removeAttribute; свои данные —data-*иdataset.