Rendere visibili o invisibili elementi html via Javascript

Giorgio Borelli

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.

Categorie: html | Javascript

Tags: ,

Aggiungi Commento

biuquote
  • Commento
  • Anteprima
Loading