Javascript come nascondere un elemento all’interno della pagina
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.
