Как изменить класс HTML-элемента с помощью JavaScript?

Основные методы работы с классами в JavaScript

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

1. Почему не работает className?

Свойство className заменяет все классы элемента одной строкой. Когда вы пишете:

document.getElementById('myDiv').className = 'blue';

Вы полностью стираете старый список классов (включая "box") и записываете только "blue". Это неудобно, если нужно сохранить часть классов.

2. Правильный способ: classList

Объект classList — это современный API для работы с классами. Вот его основные методы:

• classList.add('className') — добавляет класс (не удаляя другие)
• classList.remove('className') — удаляет класс
• classList.toggle('className') — переключает класс (добавляет, если нет; удаляет, если есть)
• classList.contains('className') — проверяет, есть ли класс (возвращает true/false)
• classList.replace('oldClass', 'newClass') — заменяет один класс на другой

3. Решение вашей задачи

Вот как можно реализовать смену класса с "red" на "blue" при клике на кнопку, сохраняя класс "box":

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

button.addEventListener('click', function() {
  // Вариант 1: удаляем "red" и добавляем "blue"
  div.classList.remove('red');
  div.classList.add('blue');
  
  // Вариант 2 (короче): используем replace
  // div.classList.replace('red', 'blue');
  
  // Вариант 3: если нужно просто переключить цвет
  // div.classList.toggle('red');
  // div.classList.toggle('blue');
});

4. Пример с проверкой наличия класса

Допустим, вы хотите переключать класс "active" только если у элемента уже есть класс "highlighted":

if (div.classList.contains('highlighted')) {
  div.classList.toggle('active');
}

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

Методы add и remove могут принимать несколько аргументов:

// Добавить сразу два класса
div.classList.add('blue', 'large');

// Удалить несколько классов
div.classList.remove('red', 'small');

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

• Всегда проверяйте, что элемент существует, прежде чем работать с его классами. Используйте if (element) или опциональную цепочку element?.classList.add(...)
• Метод classList поддерживается всеми современными браузерами (IE10+). Для очень старых браузеров используйте полифиллы.
• Имена классов чувствительны к регистру: 'Red' и 'red' — это разные классы.

Теперь вы можете легко управлять классами без потери существующих. Используйте classList — это стандартный и самый удобный способ!

const div = document.getElementById('myDiv');
let classes = div.className.split(' '); // ['box', 'red']
let index = classes.indexOf('red');
if (index !== -1) {
  classes[index] = 'blue'; // заменяем 'red' на 'blue'
}
div.className = classes.join(' '); // 'box blue'

function addClass(element, className) {
  if (!element.className.includes(className)) {
    element.className += ' ' + className;
  }
}

function removeClass(element, className) {
  element.className = element.className
    .split(' ')
    .filter(c => c !== className)
    .join(' ');
}

function hasClass(element, className) {
  return element.className.split(' ').includes(className);
}