Привнесите стиль в свой код с помощью JavaScript
"Style JS" означает применение CSS-стилей к HTML-элементам путем использования JavaScript. Это может быть полезно в тех случаях, когда необходимо динамически изменять стили элементов в зависимости от пользовательского ввода, каких-то событий на странице или для анимации.
Для примера рассмотрим использование "Style JS" при изменении фона элемента при нажатии на него. Для начала необходимо создать функцию, которая будет применять стиль к элементу при нажатии на него. В данном случае мы будем изменять цвет фона элемента кнопки для создания визуальной обратной связи при нажатии на кнопку.
javascript
function changeBackground() {
document.querySelector("#my-button").style.backgroundColor = "red";
}
В этом примере мы используем метод `querySelector` для поиска элемента с `id` "my-button" и применяем стиль, устанавливая новый цвет фона равным "red".
Теперь нам нужно вызвать эту функцию, когда происходит событие нажатия на кнопку. Для этого мы использовали метод `addEventListener`, который прослушивает событие клика на кнопке:
javascript
document.querySelector("#my-button").addEventListener("click", changeBackground);
Теперь, когда пользователь нажимает на кнопку, функция `changeBackground()` вызывается и изменяет цвет фона кнопки на красный.
Это только один из многих способов использования "Style JS", и динамическое изменение стилей с помощью JavaScript может быть полезным для более мощного воздействия на пользовательский интерфейс и пользовательский опыт.