Иногда нужно изменить внешний вид элемента прямо из скрипта.
Это может быть кнопка, которая меняет цвет при клике, или блок, который исчезает при наведении. JavaScript позволяет управлять стилями любого HTML-элемента — быстро и гибко. Ниже — самые полезные приёмы.
Способ 1. Изменение встроенного стиля через style
Самый прямой способ — доступ к свойствам через element.style.
javascriptКопироватьРедактироватьconst box = document.getElementById("myBox");
box.style.backgroundColor = "red";
box.style.fontSize = "18px";
Работает с любыми CSS-свойствами, только нужно писать их в camelCase (например, background-color → backgroundColor).
Способ 2. Изменение класса через classList
Более гибкий способ — добавление или удаление классов, описанных в CSS:
javascriptКопироватьРедактироватьconst btn = document.querySelector(".button");
btn.classList.add("active"); // добавляет класс
btn.classList.remove("inactive"); // удаляет класс
btn.classList.toggle("highlight"); // переключает класс
Такой подход позволяет централизованно управлять стилями через CSS.
Способ 3. Получение текущего стиля с getComputedStyle
Если нужно узнать, какой стиль применён к элементу:
javascriptКопироватьРедактироватьconst el = document.querySelector(".box");
const style = getComputedStyle(el);
console.log(style.backgroundColor); // например, "rgb(255, 0, 0)"
Полезно для анимаций и условий — например, менять цвет только если текущий — чёрный.
Пример: меняем цвет фона при клике
htmlКопироватьРедактировать<div id="demo" style="padding: 20px;">Нажми меня</div>
<script>
const demo = document.getElementById("demo");
demo.addEventListener("click", function () {
this.style.backgroundColor = "lightblue";
this.style.color = "#fff";
});
</script>
Можно создать полноценные интерактивные элементы без CSS-фреймворков.
Заключение
Изменение стиля элемента в JavaScript — это просто. Используй style для мгновенных изменений, classList — для чистого управления стилями, getComputedStyle — если нужно узнать текущие значения. Всё это позволяет сделать интерфейс живым и адаптивным.