Как добавить CSS-класс к HTML-элементу с помощью JavaScript?

Правильный способ добавления класса через classList

Современный и рекомендуемый способ работы с классами в JavaScript — это использование свойства classList. Оно предоставляет удобные методы для добавления, удаления и проверки классов без риска потерять существующие.

Вот как правильно решить вашу задачу:

// Получаем элемент
let div = document.getElementById('myDiv');

// Добавляем класс (старые классы сохраняются)
div.classList.add('highlight');

// Если нужно добавить несколько классов сразу
div.classList.add('highlight', 'animated', 'visible');

Почему className — это плохая практика?

Когда вы используете className, вы полностью перезаписываете атрибут class элемента. Если у элемента уже есть классы, они будут удалены. Например:

// Исходный элемент: <div class="old-class">
div.className = 'new-class';
// Результат: <div class="new-class"> — старый класс пропал!

Чтобы сохранить старые классы через className, пришлось бы делать так:

div.className = div.className + ' highlight'; // Громоздко и неудобно

Основные методы classList

• add(класс1, класс2, ...) — добавляет один или несколько классов
• remove(класс1, класс2, ...) — удаляет один или несколько классов
• toggle(класс) — если класс есть, удаляет его; если нет — добавляет (как переключатель)
• contains(класс) — проверяет, есть ли класс у элемента (возвращает true/false)
• replace(старыйКласс, новыйКласс) — заменяет один класс на другой

Полный рабочий пример для вашей задачи

Давайте сделаем так, чтобы при клике на кнопку блок подсвечивался, а при повторном клике — подсветка убиралась:

// HTML
// <button id="myButton">Переключить подсветку</button>
// <div id="myDiv" class="box">Этот блок изменит цвет</div>

// JavaScript
let button = document.getElementById('myButton');
let div = document.getElementById('myDiv');

button.addEventListener('click', function() {
  // Проверяем, есть ли класс
  if (div.classList.contains('highlight')) {
    div.classList.remove('highlight');
  } else {
    div.classList.add('highlight');
  }
  
  // Или проще одной строкой:
  // div.classList.toggle('highlight');
});

Проверка наличия класса

Метод contains очень полезен, когда нужно выполнить разные действия в зависимости от того, есть класс или нет:

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

Важные моменты

• classList работает во всех современных браузерах (IE10+). Для очень старых браузеров (IE9 и ниже) используйте className с проверкой.
• Имена классов чувствительны к регистру — 'Highlight' и 'highlight' это разные классы.
• Методы add и remove игнорируют попытки добавить уже существующий класс или удалить отсутствующий — ошибки не будет.

Используйте classList — это современный, чистый и удобный способ управления классами в JavaScript.

// Устанавливаем data-атрибут
div.dataset.state = 'highlighted';

// Проверяем состояние
if (div.dataset.state === 'highlighted') {
  div.style.backgroundColor = 'yellow';
}

// CSS можно использовать селектор по атрибуту
// [data-state="highlighted"] { background-color: yellow; }

function addClass(element, className) {
  // Проверяем, есть ли уже такой класс
  if (element.className.indexOf(className) === -1) {
    element.className += ' ' + className;
  }
}

function removeClass(element, className) {
  element.className = element.className.replace(
    new RegExp('(^|\\s)' + className + '(\\s|$)', 'g'), 
    ' '
  ).trim();
}