Как добавить в html-элемент несколько классов?
Чтобы добавить в html-элемент несколько классов, можно воспользоваться методом classList.add() у элемента. Этот метод может принимать любое количество параметров. Каждый из этих параметров должен быть строкой - это имя класса, которое нужно добавить:
// создаём новый элемент
const el = document.createElement('div');
// добавляем классы
el.classList.add('first', 'second');
// После всех изменений
el.className; // first second
Также можно добавлять классы отдельными вызовами метода:
// создаём новый элемент
const el = document.createElement('div');
// добавляем первый класс
el.classList.add('first');
// добавляем второй класс
el.classList.add('second');
// После всех изменений
el.className; // first second
Имена классов должны соответствовать правилам именования, то есть, например, не должны содержать пробельные символы. Такой код выдаст ошибку:
const el = document.createElement('div');
el.classList.add('first second'); // ошибка! Имя класса задано неверно
В особых случаях можно использовать className. Хоть он служит для этих же целей, но имеет некоторые особенности. Например, так мы добавим ряд классов описав их одной строкой.
document.body.className = 'page page--contact theme-light';
Каждый раз мы запиcываем новые значение в атрибут класса. Бывает удобно при создании элемента. Или, наоборот, можем быстро удалить все классы указав className = ''.
document.body.className = '' // удаляем все классы
