JavaScript: dettagli della proprietà className

La proprietà className nel DOM conserva una lista dei nomi delle classi CSS associate ad un elemento. Corrisponde all'attributo HTML 5 class e può essere usata sia in lettura che in scrittura.

Consideriamo il seguente elemento:

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

In lettura il valore della proprietà className in questo caso è a b c (notate gli spazi). Se volessimo aggiungere una classe dovremmo scrivere:

const test = document.getElementById('test');

const classes = test.className; // a b c - lettura

test.className = classes + ' d'; // scrittura

Quindi ora l'elemento nel DOM apparirà come:

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

Per resettare questa proprietà si usa una stringa vuota:

test.className = '';

Quindi ora l'elemento nel DOM apparirà come:

<div id="test" class=""></div>

Come si può notare, tutto è basato sulla manipolazione delle stringhe.