Добавление класса с помощью JavaScript

В JavaScript существует метод addClass(), который позволяет добавить один или несколько классов к выбранным элементам HTML.

Пример использования метода addClass():

HTML:

Нажми меня

JavaScript:

var button = document.getElementById("myButton");
button.classList.add("myClass");

В данном примере мы находим кнопку с id "myButton" с помощью метода getElementById(). Затем мы используем свойство classList, чтобы обратиться к классам этой кнопки, и добавляем новый класс "myClass" с помощью метода add().

С помощью метода addClass() можно добавить несколько классов одновременно, указав их через пробел:

JavaScript:

button.classList.add("class1", "class2", "class3");

Кроме того, с помощью метода addClass() можно проверить, существует ли уже определенный класс у элемента, и добавить его только в случае его отсутствия:

JavaScript:

if (!button.classList.contains("myClass")) {
  button.classList.add("myClass");
}

Также можно добавить классы при использовании jQuery:

HTML:

Нажми меня

JavaScript:

$("#myButton").addClass("myClass");

Здесь мы используем селектор "#myButton" для нахождения кнопки с id "myButton" и добавляем ей класс "myClass" с помощью метода addClass() из библиотеки jQuery.