Как изменить CSS-класс элемента через JavaScript?

Привет всем! У меня есть вопрос по работе с JavaScript. Мне нужно научиться менять класс у HTML-элементов когда происходят разные события на странице. Например, когда пользователь кликает на кнопку или наводит мышку на блок. Я пробовал разные способы но пока не получается сделать это правильно. Может кто-то объяснит как это работает? Буду очень благодарен за помощь и примеры кода если есть возможность.

Можно еще проверить, есть ли класс с помощью element.classList.contains('имя-класса') - это возвращает true или false. Удобно для условий. Какие именно события тебе нужны? Для клика это просто addEventListener('click', function(){}), а для наведения мыши - mouseenter и mouseleave.

Для смены CSS-классов используй classList - он намного удобнее. element.classList.add('новый-класс') добавляет класс, element.classList.remove('старый-класс') убирает его. Есть еще element.classList.toggle('класс') - переключает класс туда-сюда. Можешь использовать element.className = 'новое-значение', но осторожно - это сотрет все остальные классы. Лучше stick с classList.