La proprietà className nel DOM conserva come stringa i nomi delle classi CSS associate ad un elemento. Corrisponde all'attributo HTML 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');
let 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.