jQuery ottiene e imposta le classi CSS

Con jQuery, è facile operare sugli elementi CSS.

Operazioni jQuery CSS

jQuery ha diversi metodi per operare con CSS. Studieremo i seguenti:

  • addClass() - Aggiungi una o più classi agli elementi selezionati
  • removeClass() - Rimuovi una o più classi dagli elementi selezionati
  • toggleClass() - Esegui l'aggiunta/rimozione di classi sugli elementi selezionati
  • css() - Imposta o restituisce le proprietà di stile

Tabella di stili dell'esempio

La seguente tabella di stili sarà utilizzata per tutti gli esempi di questa pagina:

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

Metodo jQuery addClass()

Esempio seguente mostra come aggiungere la proprietà class a diversi elementi. Naturalmente, puoi anche selezionare più elementi quando aggiungi classi:

Esempio

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Prova tu stesso

Puoi anche specificare più classi nel metodo addClass():

Esempio

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Prova tu stesso

Metodo jQuery removeClass()

Esempio seguente dimostra come rimuovere la proprietà class da diversi elementi:

Esempio

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Prova tu stesso

Metodo jQuery toggleClass()

Esempio seguente mostrerà come utilizzare il metodo jQuery toggleClass(). Questo metodo esegue l'aggiunta/rimozione di classi degli elementi selezionati:

Esempio

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Prova tu stesso

Metodo jQuery css()

Inizieremo a spiegare il metodo jQuery css() nel capitolo successivo.

Manuale di riferimento jQuery HTML

Per informazioni complete sui metodi jQuery CSS, visitare il nostro Manuale di riferimento jQuery CSS