Как с помощью js изменить CSS

С помощью JavaScript можно изменять CSS свойства элементов на странице. Для этого используются свойства объекта style элемента, которое предоставляет доступ к его стилям.

Например, допустим, у вас есть элемент с идентификатором myElement, который имеет стиль color: blue, а вы хотите изменить его на color: red. Это можно сделать следующим образом:

let el = document.getElementById("myElement");
el.style.color = "red";

Как только эта функция выполнится, цвет текста в элементе myElement изменится на красный.

Также можно использовать метод setProperty() для установки CSS свойств:

el.style.setProperty("color", "red");

Обратите внимание, что имя свойства CSS используется в формате camelCase, а не в формате дефисового регистра, как в CSS. Так, для установки свойства font-size используется имя fontSize.

Вы также можете устанавливать несколько свойств CSS с помощью объекта style:

let el = document.getElementById("myElement");
el.style.color = "red";
el.style.fontSize = "24px";

В этом примере мы задали цвет текста и размер шрифта для элемента myElement.

Также можно добавлять и удалять CSS классы элементов, используя методы classList.add() и classList.remove() соответственно:

let el = document.getElementById("myElement");
el.classList.add("newClass");
el.classList.remove("oldClass");

В этом примере мы добавляем класс newClass к элементу myElement и удаляем класс oldClass. Кроме того, можно использовать метод classList.toggle() для переключения класса в зависимости от того, есть он или нет у элемента:

el.classList.toggle("active");

В этом примере мы переключаем класс active для элемента myElement. Если этот класс уже есть у элемента, он будет удален, а если его нет, он будет добавлен.