Gli ultimi tutorial di sviluppo web
 

jQuery - Ottenere e impostare classi CSS

❮ Precedente Successivo Capitolo ❯

Con jQuery, è facile manipolare il CSS di elementi.


jQuery manipolazione CSS

jQuery ha diversi metodi per la manipolazione CSS. Prenderemo in esame i seguenti metodi:

  • addClass() - Aggiunge una o più classi di elementi selezionati
  • removeClass() - Rimuove una o più classi di elementi selezionati
  • toggleClass() - Alterna tra l'aggiunta / rimozione di classi dagli elementi selezionati
  • css() - imposta o restituisce l'attributo di stile

esempio di stile

Il seguente foglio di stile sarà utilizzato per tutti gli esempi in questa pagina:

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

.blue {
    color: blue;
}

jQuery addClass() Metodo

L'esempio seguente mostra come aggiungere attributi di classe di elementi diversi. Naturalmente è possibile selezionare più elementi, quando si aggiungono le classi:

Esempio

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

È inoltre possibile specificare più classi all'interno del addClass() metodo:

Esempio

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

jQuery removeClass() Metodo

L'esempio seguente mostra come rimuovere un attributo di classe specifica da diversi elementi:

Esempio

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

jQuery toggleClass() Metodo

L'esempio seguente mostra come utilizzare il jQuery toggleClass() metodo. Questo metodo alterna tra l'aggiunta / rimozione classi dagli elementi selezionati:

Esempio

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

jQuery css() Metodo

Il jQuery css() metodo verrà spiegato nel prossimo capitolo.

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»

jQuery CSS di riferimento

Per una panoramica completa di tutti i metodi di jQuery CSS, si prega di visitare il nostro / CSS di riferimento jQuery HTML .


❮ Precedente Successivo Capitolo ❯