Как добавить, убрать или переключить CSS-класс
Короткий ответ
У свойства classList есть методы для всех действий с классами:
<style>.active { color: crimson; font-weight: bold; }</style>
<p id="text">Click the buttons</p>
<button id="add">add</button>
<button id="remove">remove</button>
<button id="toggle">toggle</button>
<script>
const text = document.getElementById('text');
document.getElementById('add').onclick = () => text.classList.add('active');
document.getElementById('remove').onclick = () => text.classList.remove('active');
document.getElementById('toggle').onclick = () => text.classList.toggle('active');
</script>По условию
Второй аргумент toggle() принудительно включает или выключает класс:
input.classList.toggle('invalid', input.value.trim() === '');Проверка и замена
contains() проверяет наличие класса, replace() меняет один класс на другой:
if (button.classList.contains('primary')) {
button.classList.replace('primary', 'secondary');
}Частая ошибка
Присвоение className заменяет сразу все классы элемента. Чтобы изменить один, используйте classList:
// before: class="button large"
button.className = 'active'; // after: class="active", the others are gone