JavaScript: gestire le classi CSS senza jQuery

I metodi di jQuery addClass(), removeClass() e hasClass() per gestire le classi CSS possono essere implementati anche senza usare questa libreria. Vediamo come.

hasClass()

Questa funzione viene implementata con un'espressione regolare:

function hasClass(target, theClass) {

	var pattern = new RegExp("(^| )" + theClass + "( |$)");

  	if (pattern.test(target.className)) {
    	return true;
  	}

  	return false;	

}

addClass()

Questa funzione si basa su una semplice analisi delle stringhe:

function addClass(target, theClass) {

    if (target.className == "") {
      target.className = theClass;
    }
    else {
      target.className += " " + theClass;
    }
}

removeClass()

Quest'ultima funzione utilizza le espressioni regolari con il metodo replace():

function removeClass(target, theClass) {

  var pattern = new RegExp("(^| )" + theClass + "( |$)");

  target.className = target.className.replace(pattern, "$1");
  target.className = target.className.replace(/ $/, "");


}

Esempio d'uso

Ecco un esempio pratico dell'uso di queste tre funzioni. Partiamo da questa struttura:

<div class="test">
	<ul>
		<li class="a">Uno</li>
		<li>Due</li>
		<li class="a">Tre</li>
	</ul>
</div>

e aggiungiamo il seguente codice:

window.onload = function() {

	var test = document.getElementsByTagName('div')[0];
	var a1 = document.getElementsByTagName('li')[0];
	var a2 = document.getElementsByTagName('li')[2];
	
	var add = document.getElementById('add');
	var remove = document.getElementById('remove');
	var has = document.getElementById('has');
	
	remove.onclick = function() {
	
		removeClass(test, 'test');
		
		return false;
	
	};
	
	add.onclick = function() {
	
		addClass(a1, 'test');
		
		return false;
	
	};
	
	has.onclick = function() {
	
		alert(hasClass(a2, 'a'));
		
		return false;
	
	};

};

Potete visionare l'esempio finale in questa pagina.