JavaScript: usare classList

JavaScript possiede una caratteristica che va a colmare un vuoto in precedenza esistente nella gestione delle classi CSS degli elementi. Questa caratteristica sono le API classList.

Consideriamo il seguente elemento HTML:


<div id="test" class="a b c"></div>

Utilizzando le nuove API possiamo scrivere:


const test = document.getElementById( "test" );
console.log( test.classList );
// [ "a", "b", "c" ]

L'output può variare in base al browser, ma ciò che viene restituito è sempre un'istanza della DOMTokenList. Quest'interfaccia dispone di diversi metodi e proprietà per lavorare con le classi:

  • add() – aggiunge una classe alla lista
  • remove() – rimuove una classe dalla lista
  • contains() – verifica se una classe è presente nella lista
  • toggle() – aggiunge o rimuove una classe a seconda se sia già presente o meno nella lista
  • item() – restituisce una classe nella posizione specificata
  • toString() – trasforma la lista in una stringa
  • length – restituisce il numero delle classi nella lista
  • value – aggiunge metodi o proprietà all'oggetto classList.

Alcuni esempi:


test.classList.add( "d" );
console.log( test.classList ); // [ "a", "b", "c", "d" ]
console.log( test.classList.contains( "k" ) ); // false
console.log( test.classList.item( 0 ) ); // "a"

Per testare se un browser supporta queste API potete verificare la presenza dell'oggetto classList su un elemento HTML:


if( "classList" in document.createElement( "div" ) ) {
    // classList API disponibile
}
Torna su