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

Работа со стилями через JavaScript

Изменение inline-стилей

​Каждый HTML-элемент имеет свойство style, которое позволяет задавать CSS-свойства напрямую из JavaScript.

<div id="box">Прямоугольник</div>

const box = document.getElementById("box");
box.style.width = "200px";
box.style.height = "100px";
box.style.backgroundColor = "lightblue";
box.style.border = "1px solid black";

Важно: JavaScript использует camelCase для CSS-свойств:

• background-color → backgroundColor
• font-size → fontSize
  

Получение вычисленных стилей

Если вы хотите узнать, какие стили применились к элементу (включая те, что заданы в CSS-файле), используйте getComputedStyle.

/* styles.css */
#text {
  color: crimson;
  font-size: 18px;
}

const text = document.getElementById("text");
const computed = getComputedStyle(text);

console.log(computed.color);      // rgb(220, 20, 60)
console.log(computed.fontSize);   // 18px

Классы: className и classList

element.className

Это строка, представляющая все классы элемента.

<div id="item" class="card highlighted"></div>

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

console.log(item.className); // "card highlighted"

// Перезаписываем все классы:
item.className = "card active";

element.classList

​Более удобный способ управления классами. Это объект с методами:

Пример:

const btn = document.getElementById("toggle-btn");

btn.classList.add("active");             // Добавит класс
btn.classList.remove("active");          // Удалит класс
btn.classList.toggle("selected");        // Добавит или удалит
console.log(btn.classList.contains("selected")); // true/false

Динамическое добавление стилей

Иногда полезно добавлять стили прямо в <style> с помощью JS:

const style = document.createElement("style");
style.textContent = `
  .red-box {
    background-color: red;
    width: 100px;
    height: 100px;
  }
`;
document.head.appendChild(style);

const box = document.createElement("div");
box.className = "red-box";
document.body.appendChild(box);

Комбинирование: классы + inline-стили

Можно совместно использовать классы и стили:

const el = document.createElement("div");
el.classList.add("box");
el.style.borderRadius = "10px";
el.style.boxShadow = "0 4px 10px rgba(0, 0, 0, 0.2)";
document.body.appendChild(el);

Частая ошибка: перезапись style

Если вы присваиваете значение element.style = "...", это не работает — нужно использовать отдельные свойства:

Неправильно:

element.style = "color: red"; // Ошибка!

Правильно:

element.style.color = "red";