как добавить класс к элементу 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');
Используйте этот метод с осторожностью, так как он не сохраняет предыдущие классы.
