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

javascriptelement.classList;

Exempel . Antal klasser

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

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

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

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

Resultat av kodkörning:

javascript3

Exempel . Vi itererar genom klasserna

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

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);
}

Resultat av kodkörning:

javascript'www'
'ggg'
'zzz'

Se även