Operazioni CSS jQuery

Una parte molto importante di jQuery è la possibilità di manipolare il DOM.

jQuery fornisce metodi efficaci per manipolare lo stile degli elementi.

In questa sezione, spiegheremo come aggiungere o rimuovere classi CSS nel DOM.

Operazioni CSS con jQuery

Con jQuery, possiamo facilmente manipolare lo stile degli elementi.

Abbiamo i seguenti metodi jQuery per operazioni CSS:

• addClass()

• removeClass()

• toggleClass()

• css()

Vi mostrerò come utilizzare ciascun metodo.

Metodo jQuery addClass()

jQuery addClass()Il metodo aggiunge una o più classi agli elementi selezionati.

Esempio di aggiunta di una classe al primo elemento <p>:

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

Una volta, è possibile aggiungere più classi a un elemento selezionato (separati da spazi), come mostrato di seguito:

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

Metodo jQuery removeClass()

jQuery removeClass()Il metodo rimuove una o più classi dagli elementi selezionati.

Esempio di rimozione di una classe da tutti gli elementi <p>:

$("button").click(function(){
　　$("p").removeClass("highlight");
});

Una volta, è possibile rimuovere una classe o più classi da un insieme di elementi selezionati (separati da spazi), come mostrato di seguito:

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

Se non viene specificato il nome della classe nei parametri, vengono eliminate tutte le classi:

$("button").click(function(){
　　$("p").removeClass();
});

Metodo toggleClass() jQuery

jQuery toggleClass()Il metodo passa tra aggiungere/eliminare una o più classi degli elementi selezionati.

L'esempio seguente passa tra aggiungere e eliminare la classe "anotherClass" per tutti gli elementi <p>:

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

Questo metodo verifica il nome della classe specificata per ogni elemento:

• Se manca il nome della classe, viene aggiunto

• Se è stato impostato il nome della classe, viene eliminato

Metodo css() jQuery

jQuery css()Il metodo ottiene o imposta uno o più attributi di stile degli elementi selezionati.

jQuery css()I metodi saranno spiegati nel capitolo successivo.

Riferimento CSS jQuery

Per una guida completa sui metodi CSS, visitare il nostroRiferimento HTML / CSS jQuery.