jQuery - Ottieni e imposta classi CSS
Con jQuery, è facile manipolare lo stile degli elementi.
jQuery Manipolazione CSS
jQuery ha diversi metodi per la manipolazione CSS. Esamineremo i seguenti metodi:
addClass()- Aggiunge una o più classi agli elementi selezionatiremoveClass()- Rimuove una o più classi dagli elementi selezionatitoggleClass()- Alterna tra l'aggiunta/rimozione di classi dagli elementi selezionaticss()- Imposta o restituisce l'attributo di stile
Esempio di foglio di stile
Il seguente foglio di stile verrà utilizzato per tutti gli esempi in questa pagina:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery metodo addClass()
L'esempio seguente mostra come aggiungere attributi di classe a diversi elementi. Ovviamente puoi selezionare più elementi, quando aggiungi classi:
Esempio
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Puoi anche specificare più classi all'interno del addClass()metodo:
Esempio
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery metodo removeClass()
L'esempio seguente mostra come rimuovere un attributo di classe specifico da diversi elementi:
Esempio
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQuery metodo toggleClass()
L'esempio seguente mostrerà come utilizzare il toggleClass()metodo jQuery. Questo metodo alterna tra l'aggiunta/rimozione di classi dagli elementi selezionati:
Esempio
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css() metodo
Il metodo jQuery css()verrà spiegato nel prossimo capitolo.
Esercizi jQuery
Riferimento CSS jQuery
Per una panoramica completa di tutti i metodi CSS jQuery, vai al nostro Riferimento HTML/CSS jQuery .