JavaScript: la proprietà del DOM className

La proprietà className nel DOM conserva una lista dei nomi delle classi CSS associate ad un elemento. Corrisponde all'attributo (X)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:

var test = document.getElementById('test');
var 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>

Volendo rimuovere una classe specifica possiamo scrivere:

var removeClass = function(element, cls) {
	var origClass = element.className,
	    newClasses = [],
	    classes = origClass.split(' '),
	    len = classes.length,
	    i;
	for( i = 0; i < len; ++i ) {
		var currentClass = classes[i];
		if(currentClass != cls) {
			newClasses.push(currentClass);
		}
	}
	element.className = newClasses.join(' ');
};

removeClass(test, 'a');

Quindi ora l'elemento nel DOM apparirà come:

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

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