Свойство classList содержит псевдомассив CSS классов элемента, а также позволяет добавлять и удалять классы элемента, проверять наличие определенного класса среди классов элемента.

Речь идет об атрибуте class, внутри которого можно писать несколько классов через пробел, например 'www ggg zzz'. С помощью classList можно удалить, к примеру, класс ggg, не затронув остальные классы.

Синтаксис

У classList есть набор методов, которые можно использовать для работы с классами. Давайте их разберем.

Метод add

Метод add добавляет указанный класс:

элемент.classList.add('класс');

Метод remove

Метод remove удаляет указанный класс:

элемент.classList.remove('класс');

Метод contains

Метод contains проверяет наличие указанного класса (возвращает true, если такой класс есть у элемента, false - если нет):

элемент.classList.contains('класс');

Метод toggle

Метод toggle добавляет класс, если его нет, удаляет если есть:

элемент.classList.toggle('класс');

Сам classList

Сам classList это псевдомассив классов элемента (их можно, к примеру, перебрать циклом):

элемент.classList

Так можно найти количество классов элемента:

элемент.classList.length

Примеры

Пример . Добавление класса

Добавим элементу класс kkk:

<p id="elem" class="www ggg zzz"></p>
var elem = document.getElementById('elem');
elem.classList.add('kkk');

HTML код станет выглядеть так:

<p id="elem" class="www ggg zzz kkk"></p>

Пример . Добавление существующего класса

Добавим элементу класс zzz, который уже есть в элементе - ничего не произойдет, так как дубли классов не добавляются:

<p id="elem" class="www ggg zzz"></p>
var elem = document.getElementById('elem');
elem.classList.add('zzz');

HTML код станет выглядеть так (ничего не поменяется):

<p id="elem" class="www ggg zzz"></p>

Пример . Удаление класса

Удалим класс ggg:

<p id="elem" class="www ggg zzz"></p>
var elem = document.getElementById('elem');
elem.classList.remove('ggg');

HTML код станет выглядеть так:

<p id="elem" class="www zzz"></p>

Пример . Проверка класса

Проверим, есть ли у элемента класс ggg:

<p id="elem" class="www ggg zzz"></p>
var elem = document.getElementById('elem');

var checkClass = elem.classList.contains('ggg');
document.write(checkClass);

Результат выполнения кода:

true

Пример . Количество классов

Узнаем количество классов элемента:

<p id="elem" class="www ggg zzz"></p>
var elem = document.getElementById('elem');

var length = elem.classList.length;
document.write(length);

Результат выполнения кода:

3

Пример . Перебираем классы

Выведем столбец классов элемента:

<p id="elem" class="www ggg zzz"></p>
var elem = document.getElementById('elem');
var classNames = elem.classList;

for (var i = 0; i < classNames.length; i++) {
	document.write(classNames[i] + '<br>');
}

Результат выполнения кода:

www
ggg
zzz

Пример . Применение

Давайте сделаем кнопку, по нажатию на которую элемент будет то показываться, то скрываться. Пусть по умолчанию элемент скрыт (это реализуем с помощью display: none), а покажется он с помощью добавления класса active. Этот класс будем то добавлять, то убирать с помощью classList.toggle:

#elem {
	display: none;
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

#elem.active {
	display: block;
}
<button onclick="toggle()">Нажми на меня</button>
<div id="elem"></div>
function toggle() {
	var elem = document.getElementById('elem');
	classList.toggle('active');
}

Понажимайте на кнопочку: