Свойство classList

Свойство classList съдържа псевдомасив от CSS класове на елемента, както и позволява добавяне и премахване на класове на елемента, проверка за наличие на определен клас сред класовете на елемента.

Става дума за атрибута class, в който може да се пишат няколко класа чрез интервал, например www ggg zzz. С помощта на classList може да се премахне, например, класът ggg, без да се засягат останалите класове.

Синтаксис

javascriptелемент.classList;

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

Да разберем броя на класовете на елемента:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

Резултат от изпълнението на кода:

javascript3

Пример . Обхождаме класовете

Да изведем един по един класовете на елемента:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
  console.log(className);
}

Резултат от изпълнението на кода:

javascript'www'
'ggg'
'zzz'

Вижте също

  • метод classList.add,
    който добавя зададен клас
  • метод classList.remove,
    който премахва зададен клас
  • метод classList.contains,
    който проверява зададен клас
  • метод classList.toggle,
    който редува зададен клас