как добавить класс к элементу dom в javascript

Метод classList предоставляет простые и удобные методы для работы с классами элемента. Чтобы добавить класс к элементу, вы можете использовать метод add().

// Находим элемент по его селектору (например, по ID)
const element = document.getElementById('myElement');

// Добавляем класс
element.classList.add('new-class');

Этот метод безопасен и не перезаписывает существующие классы элемента. Вы также можете добавить несколько классов, передав их в метод add через запятую:

element.classList.add('class1', 'class2');

Вы можете напрямую изменить строку className элемента. Однако будьте осторожны — это свойство перезаписывает все существующие классы.

// Выбираем элемент
const element = document.getElementById('myElement');

// Добавляем новый класс
element.className += ' new-class'; // добавляем пробел перед новым классом

Если элементы уже имеют классы, этот подход может привести к ошибкам, если вы забудете про пробел. Этот метод не добавляет классы, если элемент имеет уже ранее присвоенные классы.

Еще один способ добавления класса — с помощью метода setAttribute. Этот вариант также перезаписывает все существующие классы.

const element = document.getElementById('myElement');

// Заменяем все классы на один новый
element.setAttribute('class', 'new-class');

Используйте этот метод с осторожностью, так как он не сохраняет предыдущие классы.