Ecco una serie di piccoli e semplici pezzi di codice Javascript che si occupano di modificare il DOM di una pagina HTML. Nulla di particolare, ma possono sempre risultare utili.
Mostrare/nascondere un elemento
La funzione prende in input l’ID dell’elemento da modificare.
1 2 3 4 5 6 7 | function hide_unhide(id){ var el = document.getElementById(id); if (el.style.display == "") el.style.display = 'none'; else el.style.display = ""; } |
Cambiare il colore di sfondo di un elemento
La funzione prende in input l’ID dell’elemento da modificare ed il codice del colore.
1 2 3 4 | function change_bgcolor(id, color){ var el = document.getElementById(id); el.style.background = color; } |
Modificare il contenuto di un elemento
La funzione prende in input l’ID dell’elemento da modificare e il testo da sostituire.
1 2 3 4 | function change_cont(id, str){ var el = document.getElementById(id); el.innerHTML = str; } |
Aggiungere contenuto ad un elemento
La funzione prende in input l’ID dell’elemento da modificare e il testo da aggiungere.
1 2 3 4 5 | function app_cont(id, str){ var el = document.getElementById(id); var app = document.createTextNode(str); el.appendChild(app); } |
Tags: for dummies, in breve, javascript, snippet, tips
Semplici ma possono semore tornare utili, grazie.
Però hanno il “difetto” di andare ad influire sulla cronologia della pagina… come si fa ad evitare questo inconveniente?
@Engelium: Ti basta assegnare l’evento onclick ad un elemento diverso da un link, poi magari puoi dare all’elemento in questione via css lo stesso cursore usato per i link (vedi qui).
In effetti non ci avevo pensato… grazie per la dritta
Felice di esserti stato utile
[...] falsa riga dell’articolo DOM for dummies di qualche giorno fa, ecco un’altro esempio un po’ più complesso di codice [...]