JavaScript: gestire le classi CSS come in jQuery

Le classi CSS vengono gestite da JavaScript tramite la proprietà className associata ad ogni elemento HTML del DOM di tipo HTMLElement. Purtroppo JavaScript non possiede i metodi che jQuery usa per gestire le classi CSS. Tuttavia, possiamo gestire le classi CSS con la stessa semplicità anche in JavaScript. Vediamo come.

Per prima cosa creiamo una funzione helper per individuare una voce in un array:

Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
}

Quindi creiamo un riferimento all'interfaccia HTMLElement:

Element = HTMLElement;

Ora creiamo un metodo per aggiungere delle classi ad un elemento:

Element.prototype.addClass = function(clas) {
    if (this.className && this.className !== '') {
        if (!this.hasClass(clas)) {
            this.className = this.className + ' ' + clas;
        }
    } else {
        this.className = clas;
    }
}

Il metodo testa la presenza del nome di una classe nel valore della proprietà e provvede ad aggiungere una o più classi CSS. Ecco invece il metodo per rimuovere le classi:

Element.prototype.removeClass = function(clas) {
    if (this.hasClass(clas)) {
        if (this.countClasses() == 1) {
            this.className = '';
        }
        else {
            var reg = new RegExp('(\\s|^)' + clas + '(\\s|$)');
            this.className = this.className.replace(reg, ' ');
        }
    }
}

Infine possiamo creare dei metodi accessori:

Element.prototype.hasClass = function(clas) {
    if ((this.className.split(' ')).contains(clas)) {
        return true;
    }
    return false;
}
Element.prototype.countClasses = function() {
    if (!this.className) {
        return 0;
    }
    if (this.className.replace(' ') == this.className) {
        return 1;
    }
    var listOf = this.className.split(' ');
    return listOf.length;
}
Element.prototype.toggleClass = function(clas1) {
    if (this.hasClass(clas1)) {
        this.removeClass(clas1);
    } else {
        this.addClass(clas1);
    }
}

Data la seguente marcatura:

<ul>
	<li class="a" id="a">A</li>
	<li class="b" id="b">B</li>
	<li class="c" id="c">C</li>
</ul>​

Ecco un esempio pratico:

var a = document.getElementById('a');

var b = document.getElementById('b');

var c = document.getElementById('c');

a.addEventListener('click', function() {

    this.removeClass('a');
    this.addClass('c');

}, false);

b.addEventListener('mouseover', function() {

    this.toggleClass('b');

}, false);

c.addEventListener('mouseout', function() {

    this.removeClass('a');
    this.addClass('a b c');

}, false);​

Potete visionare l'esempio finale in questa pagina.