Как добавить в html-элемент несколько классов?

Question

Ivan Gagarinov · Accepted Answer

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

Aleksey · Answer

В особых случаях можно использовать `className`. Хоть он служит для этих же целей, но имеет некоторые особенности. Например, так мы добавим ряд классов описав их одной строкой.

```javascript
document.body.className = 'page page--contact theme-light';
```

Каждый раз мы запиcываем новые значение в атрибут класса. Бывает удобно при создании  элемента. Или, наоборот, можем быстро удалить все классы указав `className = ''`.

```javascript
document.body.className = '' // удаляем все классы
```

Как добавить в html-элемент несколько классов?

Ответы

Каталог