Изменение класса элемента с помощью JavaScript

Ситуация, с которой часто сталкиваются новички в JavaScript, это необходимость изменения класса элемента в ответ на какое-либо событие, например, клик по элементу (onclick).

Допустим, есть кнопка на веб-странице, и при нажатии на нее должен меняться ее стиль. Для этого используется HTML-атрибут class, который определяет класс стилей элемента. Чтобы изменить класс при нажатии на кнопку, можно использовать JavaScript.

Пример кода

В HTML-разметке задается кнопка с классом button:

<button id="myButton" class="button">Нажми меня</button>

В CSS определяются два класса: button и button-clicked:

.button {
    background-color: blue;
    color: white;
}

.button-clicked {
    background-color: red;
    color: white;
}

В JavaScript прописывается функция, которая будет менять класс кнопки при нажатии:

document.getElementById("myButton").onclick = function() { 
    this.className = "button-clicked";
}

В этом примере при нажатии на кнопку ее класс будет изменен на button-clicked, и она станет красной.

Суть работы кода

JavaScript предоставляет доступ к HTML-элементам через их id или class. В данном примере используется id, чтобы «найти» кнопку на странице (document.getElementById("myButton")).

Метод onclick привязывает функцию к событию клика по кнопке. Эта функция меняет класс кнопки (this.className = "button-clicked").

Слово this внутри функции ссылается на элемент, к которому привязана функция (в данном случае, кнопку).

Заключение

JavaScript предоставляет множество возможностей для интерактивного изменения внешнего вида и поведения элементов на веб-странице. Изменение класса элемента – это только один из множества способов, которыми можно управлять элементами страницы.