Restando in tema di manipolazione del DOM (Document Object Model), vediamo oggi come rendere visibili o invisibili degli elementi html via Javascript. Forse non tutti sanno che lo stile dei tag html è modificabile anche tramite codice Javascript, in particolar modo per rendere invisibile o visibile un tag html andremo a toccare lo style dell'elemento agendo sull'attributo display direttamente tramite codice Javascript, andiamo a vedere come fare.
Per rendere invisibile un elemento html in Javascript scriveremo così:
document.getElementById(my_id).style.display = 'none';
Visto come è semplice, basta avere il controllo del tag html che desideriamo rendere invisibile a mezzo la funzione document.getElementById e dopodichè impostiamo il valore display su none per lo style.
E se invece volessimo fare l'esatto contrario, ossia rendere visibile l'elemento html via Javascript, scriveremo così:
document.getElementById(my_id).style.display = 'block';
Come leggete l'istruzione è la stessa, questa volta assegniamo però il valore block.
Pertanto rendere visibile o invisibile un elemento a mezzo codice Javascript è davvero semplice, basta identificare il tag da manipolare a mezzo il suo attributo id con document.getElementById e poi applicare rispettivamente il valore none e block alla proprietà display dello style dell'elemento.
Ma possiamo fare un'ulteriore passo avanti, la proprietà display oltre ad essere assegnata può essere anche letta a mezzo Javascript, pertanto con un controllo possiamo sapere se questa è nello stato di none o block, agendo in tal senso ed adattando il codice alle nostre esigenze possiamo mettere sù anche uno script Javascript che verifichi la visibilità o meno di un tag e lo cambi di conseguenza, scriveremo così:
if(document.getElementById(my_id).style.display == 'none') {
document.getElementById(my_id).style.display = 'block';
}
else {
document.getElementById(my_id).style.display = 'none';
}
Semplice no! Attenzione però, ho scritto rendere visibile o invisibile e non rimuovere o aggiungere in maniera voluta, poichè agendo su style.display non rimuoviamo l'elemento html dal DOM, se guardiamo infatti il sorgente html della pagina questo è ancora presente, solo non viene visualizzato (o meno) sul browser.
Chiunque voglia aggiungere qualcosa o porre delle domande su "Come rendere visibile o invisibile elementi html a mezzo codice Javascript" può farlo liberamente tramite lo spazio dei commenti, ogni intervento sarà gradito.