Как изменить класс элемента на JavaScript? Полное руководство

Использование classList — современный и правильный подход

Для управления классами элементов в JavaScript лучше всего использовать свойство classList. Оно предоставляет удобные методы для добавления, удаления, переключения и проверки классов. В отличие от className, classList не затрагивает другие классы элемента и работает как с одним, так и с несколькими классами.

Вот основные методы classList:

• element.classList.add('class1', 'class2', ...) — добавляет один или несколько классов.
• element.classList.remove('class1', 'class2', ...) — удаляет один или несколько классов.
• element.classList.toggle('class') — если класс есть, удаляет его; если нет — добавляет. Возвращает true (класс добавлен) или false (класс удалён).
• element.classList.contains('class') — проверяет, есть ли класс у элемента. Возвращает true или false.
• element.classList.replace('oldClass', 'newClass') — заменяет один класс на другой.

Теперь решим вашу задачу с кнопкой и блоком. Допустим, у нас есть CSS-класс .active, который делает блок зелёным:

// CSS
.active {
    background-color: green;
    color: white;
}

Вот исправленный JavaScript-код с использованием classList:

const button = document.getElementById('myButton');
const div = document.getElementById('myDiv');

button.addEventListener('click', function() {
    // Переключаем класс active у div
    div.classList.toggle('active');
});

Теперь при каждом клике класс будет добавляться или удаляться. Это решает проблему «однократного» срабатывания.

Более сложный пример: добавление/удаление по условию

Предположим, вы хотите добавить класс highlight при наведении мыши и удалять его, когда курсор уходит:

const element = document.querySelector('.my-element');

element.addEventListener('mouseenter', function() {
    element.classList.add('highlight');
});

element.addEventListener('mouseleave', function() {
    element.classList.remove('highlight');
});

Или, если нужно проверить, есть ли класс перед действием:

if (div.classList.contains('active')) {
    console.log('Блок уже активен');
} else {
    div.classList.add('active');
}

Работа с несколькими классами

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

div.classList.add('visible', 'animated', 'fadeIn');
div.classList.remove('hidden', 'inactive');

Замена класса

Если нужно заменить один класс на другой без лишних проверок:

div.classList.replace('old-style', 'new-style');

Важные замечания

• classList поддерживается во всех современных браузерах (IE10+). Для очень старых браузеров (IE9 и ниже) придётся использовать className с регулярными выражениями, но это редкий случай.
• Метод toggle принимает второй необязательный параметр — булево значение. Если передать true, класс будет добавлен; если false — удалён. Это удобно, когда условие уже есть:

// Добавить класс, если условие истинно, иначе удалить
const isActive = true;
div.classList.toggle('active', isActive); // класс будет добавлен

Используйте classList всегда, когда нужно динамически менять классы. Это делает код чистым, читаемым и безопасным.

const div = document.getElementById('myDiv');
div.className = div.className + ' active'; // добавляем пробел и новый класс

div.className = div.className.replace('active', '').trim();

function toggleClass(element, className) {
    const classes = element.className.split(' ');
    const index = classes.indexOf(className);
    if (index > -1) {
        classes.splice(index, 1);
    } else {
        classes.push(className);
    }
    element.className = classes.join(' ');
}