classList.add() в JavaScript

Метод classList.add() добавляет CSS-класс DOM-элементу. Классы, которые уже есть у элемента, сохраняются.

• Добавление класса
• Несколько классов
• Если класс уже есть
• Итого

Добавление класса

<button class="menu-button">Меню</button>

.menu-button {
  padding: 8px 12px;
  color: #fff;
  background-color: #4a5568;
  border: 0;
  border-radius: 4px;
}

.menu-button.is-open {
  background-color: #2f855a;
}

const menuButton = document.querySelector('.menu-button');

menuButton.classList.add('is-open');

После этого у кнопки будут классы menu-button и is-open. CSS-правило .menu-button.is-open изменит цвет кнопки. Сам метод не задаёт стили - он добавляет класс, для которого CSS может описать другой вид. Синтаксис метода: element.classList.add(‘имя-класса’).

Имя класса передают без точки: menuButton.classList.add(‘is-open’), а не menuButton.classList.add(‘.is-open’).

Несколько классов

За один вызов можно добавить несколько классов. Каждое имя передают отдельным аргументом.

menuButton.classList.add('is-open', 'is-ready');

Если класс уже есть

Если у элемента уже есть класс is-open, повторный вызов menuButton.classList.add(‘is-open’) ничего не изменит и не вызовет ошибку. Класс не появится в атрибуте class дважды.

Итого

classList.add() добавляет один или несколько классов, не удаляя уже существующие. Имя класса передают без точки, а повторное добавление того же класса безопасно. Внешний вид элемента меняют CSS-правила для добавленного класса.