{Modificare il DOM della pagina - JQuery}

Con una semplice riga .addClass() e removeClass() il gioco è fatto...

Con l'aiuto della libreria JQueri si riesce ad ottenere un cambiamento "Radicale" degli elementi della pagina web. Tramite due istruzioni .addClass() e removeClass(), possiamo aggiungere o rimuovere delle classi nella nostra pagina, il che significa che tramite apposite funzioni possiamo far interagire l'utente per cambiare l'aspetto di ciò che viene visualizzato. Molto più semplice fare un esempio pratico.
clicca sul pulsante per vedere la magia ...

.addClass

Clicca sul pulsante per vedere l'effetto

Il codice che ho utilizzato è il seguente. Codice:

<script type="text/javascript">
//all'elemento con ID testo aggiungo la classe newclass
function change(){
	$("#testo").addClass("newclass");
}
</script>

Ovviamente dobbiamo dichiarare la nuova classe CSS newclass nel modo seguente

Codice:
<style type="text/css">
.newclass{font-size:2em;font-weight:700;color:#ff0000}
</style>

Ora facciamo il "gioco" inverso, eliminiamo la classe appena generata, prova a cliccare sul pulsante qui sotto e nota cosa succede...

.removeClass

Clicca sul pulsante per vedere l'effetto

Stupefacente? nell'esempio qui sopra abbiamo eseguito una "rimozione" della classe newclass con l'analogo codice

Codice:
< script type="text/javascript">
//all'elemento con ID testo rimuovo la classe newclass
function change(){
	$("#testo").removeClass("newclass");
}
</script>

Solitamente questi due metodi vengono utilizzati assieme aggiungendo e rimuovendo delle classi nello stesso istante in questo modo

Codice:
<script type="text/javascript">
//all'elemento con ID btn rimuovo la classe riposo e aggiungo la classe click
//questo ad esempio al click del pulsante cambiamo l'aspetto dello stesso
$("#btn").removeClasse("riposo").addClass("click");
</script>

E ora avanti con i vostri esperimenti...

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?