In questo articolo imparerai a modificare le classi CSS con l’oggetto JavaScript classList nel tuo progetto di manipolazione del DOM. L’oggetto classList ti permette di gestire le classi CSS assegnate a un elemento HTML.
<!DOCTYPE html>
<html>
<head>
<title>Mon titre</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.colorText {
color: purple;
}
.boldText {
font-weight: bold;
}
.bigText {
font-size: 35px;
}
</style>
</head>
<body>
<p id="myText">
Hello World!
</p>
</body>
</html>Modifichiamo ora il testo con la proprietà classList e applichiamo le classi CSS.
Usare i metodi classList .add() e .contains()
Crea un file index.js, recupera un riferimento all’elemento paragrafo e chiama il metodo classList.add():
index.js
const myText = document.getElementById('myText');
myText.classList.add('colorText');Il metodo integrato classList.add() applica una classe al tuo elemento HTML. In questo caso il testo dell’elemento paragrafo apparirà d’ora in poi in viola.
Puoi anche verificare se la classe CSS è presente sull’elemento paragrafo con il metodo classList.contains(), che restituisce un booleano:
const myText = document.getElementById('myText');
console.log(myText.classList.contains('colorText')); // trueDato che la classe CSS colorText è presente sull’elemento paragrafo, la chiamata restituisce true.
Usare i metodi .item() e .remove() di classList
Nel file index.js, aggiungi altre classi CSS all’elemento paragrafo:
index.js
const myText = document.getElementById('myText');
myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];La proprietà classList memorizza ogni classe aggiuntiva in un array. Se stampi myText.classList in console, ottieni un array con le tue classi CSS.
Per conoscere l’indice di una classe CSS nell’array, chiama il metodo classList.item():
const myText = document.getElementById('myText');
myText.classList.item('boldText'); // 2Per rimuovere una classe CSS, usa il metodo classList.remove():
const myText = document.getElementById('myText') ;
myText.classList.remove('bigText') ;
console.log(myText.classList) ; // ['colorText', 'boldText'] ;Una volta stampato myText.classList in console, la classe CSS rimossa non compare più nell’array e non viene applicata all’elemento paragrafo.
Ora che sai aggiungere, verificare e rimuovere le classi CSS, vediamo come sfruttare gli altri metodi di classList.
Gestire il metodo classList .toggle()
Invece di chiamare classList.add() e classList.remove() separatamente, puoi usare il metodo classList.toggle():
Per farlo, registra un listener di eventi su un pulsante nel file index.js:
index.js
textButton.addEventListener('click', () => {
myText.classList.toggle('newFont');
});A ogni clic classList.toggle() aggiunge la classe CSS se non è presente nell’array classList e restituisce true. Se la classe CSS c’è già, il metodo la rimuove e restituisce false.
const anotherClass = myText.classList.toggle('newSize');
console.log(anotherClass); // true --> La classe è stata aggiuntaPuoi anche passare un booleano come secondo argomento facoltativo al metodo classList.toggle(). La classe CSS verrà aggiunta o rimossa a seconda del valore di quel secondo argomento:
const bool = false;
let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' esiste già e verrà rimosso dall'array classList
let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' non esiste e la classe verrà aggiunta.Il metodo classList.toggle() permette di aggiungere e rimuovere classi CSS, che esistano o meno nel tuo array, scrivendo meno righe di codice.
Conclusione
La proprietà classList offre prestazioni e funzionalità migliori per modificare gli elementi HTML e le loro classi CSS in JavaScript.
Per approfondire, leggi l’articolo su come modificare il DOM in JavaScript.
