Questa semplice guida vi spiega come nascondere un elemento della vostra pagina web utilizzando Javascript.

Il seguente codice è semplice Javascript, quindi non sono necessarie librerie aggiuntive come JQuery.

Per poter nascondere un elemento, la procedura più semplice è quella di utilizzare l’ID dell’elemento come selettore, per poter specificare a Javascript quale elemento nello specifico andare a nascondere.

E’ possibile selezionare un determinato elemento anche utilizzando altre tipologie di selettori, come il TAG Name o il percorso Xpath, che corrisponde alla posizione dell’elemento all’interno dell’albero dei tag della pagina, ma ne parleremo più in la.

Il modo in cui nascondiamo ad esempio un DIV è il seguente, ossia settare la proprietà display del CSS su none.

Ipotizziamo di avere questo DIV

<div id=’div101‘>Nascondimi o mostrami a tuo piacimento</div>

Il codice da utilizzare per nascondere questo DIV sarà la seguente:

document.getElementById(“div101”).style.display = “none”;

allo stesso modo, per mostrare invece un DIV che è stato precedentemente nasconsto:

document.getElementById(“div101”).style.display = “block”;

Possiamo eventualmente creare un pulsante che nasconda o mostri il div.

Per questo abbiamo bisogno di creare due funzioni:

<script>

function mostra(){

document.getElementById(“div101”).style.display = “block”;

}

function nascondi(){

document.getElementById(“div101”).style.display = “none”;

}

</script>

I due pulsanti saranno invece così:

<button type=’button’ onclick=’nascondi();’>NASCONDI</button>

<button type=’button’ onclick=’mostra();’>MOSTRA</button>

Ecco un esempio del codice completo su JSFiddle:

Per oggi è tutto, seguiranno in seguito altre guide per altri metodi simili.