Javascript: metodo classList, css a comando.

Post aggiornato in data 13 Aprile 2020

Element.classList è un metodo Javascript che va ad interagire in modalità read-only sul modello DOMTokenList attivo sui maggiori browser in circolazione (vedi qui per compatibilità). In sostanza questo metodo ci permetterà di modificare al volo determinate classi del foglio di stile.

L’attuazione è piuttosto semplice, poniamo di avere il classico elemento div:

<div class="elemento1">..qualcosa</div>

diciamo che a seguito di un evento vogliamo modificare la classe elemento1 in elemento 2. Andremo a strutturare un Javascript in questo modo:

    var el = document.getElementByTagName('div');
    el.classList.replace("elemento1", "elemento2");

Questo metodo ci permetterà di variare la classe div dichiarata in precedenza con un altra.

Le funzioni che potremo utilizzare al posto di replace sono:

add (aggiungi)
remove (rimuovi)
toggle (aggiungere con condizione)
contains (cercare qualcosa che abbia una stringa corrispondente).

Vediamo alcuni esempi. Con add potremo semplicemente aggiungere una classe, in questo caso sarà probabilmente utile poter manipolare una div con specifiche proprietà fornite da una ID. Ad esempio:

<div class="elemento1" id="modificabile">...qualcosa</div>

come si vede abbiamo aggiunto la id = modificabile, ora possiamo permetterci di selezionare solo questa specifica div per manipolarne la classe css aggiungendone un altra:

var el = document.getElementById("modificabile");
el.classList.add("elemento2");

il risultato sarà:

<div class="elemento1 elemento2" id="modificabile">...qualcosa</div>

Con remove invece potremo togliere anziché aggiungere:

var el = document.getElementById("modificabile");
el.classList.remove("elemento1");

Più interessante toggle, che ci permetterà di andare ad aggiungere una classe css solo nel caso questa sia stata rimossa in precedenza

var el = document.getElementById("modificabile");
el.classList.toggle("elemento1");

Infine l’opzione contains è la più utile di tutte. Questo di permetterà di creare un ciclo if / then molto utile nell’avverarsi di condizioni. Ad esempio abbiamo una serie di div e solo una o alcune di esse vengono modificate da un comportamento dell’utente. Nel caso si voglia ripristinare la situazione (tipico del pulsante reset / cancel) potremo utilizzare proprio questa opzione:

var el = document.getElementById("modificabile");
if (el.classList.contains("elemento1")) {
    el.classList.add("elemento2");
} else {
    el.classList.replace("elemento2", "elemento1");
}

Come abbiamo potuto vedere si tratta di un piccolo codice che può essere d’aiuto nelle modifiche condizionali di una pagina, ad esempio modificare il comportamento da una form, o da specifiche azioni compiute dall’utente.