jQuery: agire sulla classe di un elemento.

Loading

Con jQuery è possibile manipolare le classi di un dato elemento in più modi, infatti abbiamo a disposizione tre metodi per compiere questa operazione.

  1. .addClass() – Aggiunge una classe
  2. .removeClass() – Rimuove una classe
  3. .toggleClass() – Aggiunge o rimuove una classe

Il metodo .addCalass() aggiunge una classe agli elementi selezionati:

$('#newId').addClass('nuovaClasse')

L’esecuzione di questo codice aggiungerà all’elemento con id #newId, la classe nuovaClasse

Il metodo .removeClass() rimuove la classe dagli elementi selezionati:

$('#newId').removeClass('levaClasse')

Questa riga di codice eliminerà la classe levaClasse dall’elemento con id #newId, ovviamente se la classe è stata assegnata a quell’elemento.

Il metodo .toggleClass() agisce come .addCalass() se gli elementi selezionati non hanno assegnata la classe che passiamo come parametro, mentre agisce come .removeClass() se gli elementi selezionati hanno la classe assegnata.

Esempio:

 

$("#myBox")).toggleClass('nuovaClasse');
//aggiunge la classe nuova classe all'elemento in quanto non è presente
$("#myBox")).toggleClass('myClass');
//rimuove la classe myClass