classList

В JavaScript свойство classList получает доступ к атрибуту class добавленного к элементу HTML. Манипуляции со строками позволяют добавлять, изменять и удалять классы современным способом.

Оглавление:
  1. Синтаксис
  2. Методы classList
  3. Примеры classList
  4. Поддержка classList

ClassList API

Синтаксис

var element = elem.classList;

Спецификация API DOM4 classList(DOMTokenList) W3C, MDN.

к меню ↑

Методы classList

  • classList.add( String [,String] ) — добавляет элементу класс.
  • classList.remove( String [,String] ) — удаляет у элемента класс.
  • classList.item ( Number ) аналогично classList[Number].
  • classList.toggle ( String [, Boolean]) false — удаляет указанный класс, true — добавляет.
  • classList.contains ( String ) Проверяет, есть ли указанный класс для элемента (вернет true или false).
к меню ↑

Примеры classList

Для поиска элемента HTML в примерах применяются методы JavaScript: querySelectorAll и querySelector.

Добавить класс к указанному элементу HTML.

// получить все элементы соответствующие селектору
var el = document.querySelectorAll('li');

// добавить класс всем элементам li
for (var i=0; i<el.length; i++) {
el[i].classList.add('add-class');
}

Добавит еще один класс.

function addClass(selector, myClass) {

// получить все элементы соответствующие селектору
el = document.querySelectorAll(selector);

// добавить класс к указанному элементу
for (var i=0; i<el.length; i++) {
el[i].classList.add(myClass);
}
}

// применить функцию:

// добавить еще один класс
addClass('.class', 'add-class');

// добавить класс к элементу с id <var>id-selector</var>
addClass('#id-selector', 'add-class');

Удалить класс добавленный для элемента.

var el = document.querySelectorAll('li');

// удалить класс добавленный для элементов li
for (var i=0; i<el.length; i++) {
el[i].classList.remove('el-class');
}

Переключить класс после нажатия на кнопку.

<style>.new-class {
font-size: x-large;
}</style>

<section class="old-class">Текст</section>

<button onclick="myFunction()">Переключить класс</button>

<script>function myFunction() {
var el = document.querySelector('section');

// переключить класс для элемента section
el.classList.toggle('old-class'); // старый класс
el.classList.toggle('new-class'); // новый класс
}</script>
к меню ↑

Поддержка classList

Методы для старых браузеров, где getElementById() получает доступ к элементу HTML по добавленному идентификатору.

Добавить класс:

document.getElementById("id-element").setAttribute("class", "add-class");

Удалить класс:

document.getElementById("id-element").removeAttribute("class", "remove-class");