PROGRAMMIAMO
JS - Aggiungere o elminare una classe
Aggiungere ed eliminare una classe: addClass, removeClass, toggleClass

Con il metodo css è possibile, come visto, aggiungere o modificare gli stili di un elemento. Ciò viene realizzato mediante stili inline, che vengono aggiunti al DOM in corrispondenza dell'elemento modificato. In pratica agli elementi corrispondenti viene aggiunto nel DOM un attributo style col valore del nuovo stile.

Un modo alternativo (e più elegante) consiste nel definire preventivamente una classe di stili nel foglio stile e quindi di aggiungerla dinamicamente a un elemento, come mostra l'esempio seguente:

$("#bottone").click(function(){ $("#ele").addClass("blu"); });

Nell'esempio qui sopra facendo click sul bottone #bottone, viene aggiunta una classe di nome blu all'elemento di #ele. Il metodo utilizzato ha un nome esplicativo, addClass:

$("#ele").addClass("blu");

L'unica cosa significativa da notare in questo caso è che il nome della classe non comprende il punto, che invece dovrà essere usato nel corrispondente foglio stile linkato alla pagina:

.blu { color: blue; }

Il metodo removeClass consente in modo simile di rimuovere una classe da un elemento:

 $("#ele").removeClass("blu");

Infine può essere talvolta utile il metodo toggleClass il quale aggiunge e alternativamente rimuove una classe da un elemento:

$("#bottone").click(function(){ $("#ele").toggleClass("blu"); });

In quest'ultimo esempio, ad ogni click sul bottone la classe viene aggiunta e poi tolta e poi nuovamente aggiunta... e così via.

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it