Egenskapen classList

Egenskapen classList innehåller en pseudomatris av elementets CSS-klasser, och gör det också möjligt att lägga till och ta bort elementets klasser, kontrollera förekomsten av en specifik klass bland elementets klasser.

Det handlar om attributet class, inuti vilket man kan skriva flera klasser mellanrum, till exempel www ggg zzz. Med hjälp av classList kan man ta bort, till exempel, klassen ggg, utan att påverka de övriga klasserna.

Syntax

element.classList;

Exempel . Antal klasser

Låt oss ta reda på antalet klasser elementet har:

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

let elem = document.querySelector('#elem');

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

Resultat av kodkörning:

3

Exempel . Vi itererar genom klasserna

Låt oss skriva ut klasserna i elementet en efter en:

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

let elem = document.querySelector('#elem');
let classNames = elem.classList;

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

Resultat av kodkörning:

'www'
'ggg'
'zzz'

Se även

metoden classList.add,
som lägger till en given klass
metoden classList.remove,
som tar bort en given klass
metoden classList.contains,
som kontrollerar en given klass
metoden classList.toggle,
som växlar en given klass