jQuery e classi CSS

jQuery gestisce le classi CSS attraverso i metodi addClass(), removeClass() e toggleClass(). Il primo metodo aggiunge una classe CSS, il secondo la rimuove e il terzo alterna la classe corrente con un'altra classe passata come parametro operando uno switch sulla classe. Tuttavia, la prima cosa da capire per gestire correttamente le classi CSS in jQuery è la cascata e la specificità dei CSS. Vediamo i dettagli.

Cascata e specificità

Una classe più specifica sovrascrive una classe meno specifica secondo la cascata quando si hanno regole in conflitto. Per esempio:

.classe1 {
  background: red;
}

p.classe2 {
  background: green; /* vincitrice */
}

La seconda classe ha un selettore di tipo, quindi è più specifica. Nel caso di identica specificità, vince la classe che viene dopo nel sorgente.

.classe1 {
  background: red;
}

.classe2 {
  background: green; /* vincitrice */
}

Quando invece le classi non hanno regole in conflitto, gli stili risultanti sono la somma degli stili delle singole classi.

addClass()

Il metodo addClass() accetta uno o più nomi di classe come parametri e li aggiunge all'elemento:

$('#add').click(function(event) {
  
    $('#test').addClass('add');
    
    event.preventDefault();
  
  
});

In questo caso il metodo aggiunge la classe add:

.add {
  background: #ffc;
  width: 150px;
}

removeClass()

Il metodo removeClass() accetta uno o più nomi di classe come parametri e li rimuove dall'elemento:

$('#remove').click(function(event) {
  
    $('#test').removeClass($(this).attr('class'));
    
    event.preventDefault();
  
  
});

In questo caso il metodo rimuove la classe impostata sull'elemento.

toggleClass()

Il metodo toggleClass() scambia il nome della classe corrente con quello della classe passata come parametro:

$('#toggle').click(function(event) {
  
    $('#test').toggleClass('toggle');
    
    event.preventDefault();
  
  
});

In questo caso il metodo usa la seguente classe CSS:

.toggle {
  background: #c00;
  color: #fff;
  padding: 1em;
  font-weight: bold;
  width: 100px;
}

Potete visionare gli esempi in questa pagina.