JavaScript: gestire le classi CSS con le API classList

JavaScript ha una caratteristica per gestire le 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"
Torna su