Mostrare o nascondere un elemento con Javascript

Ecco due funzioni in Javascript che consentono di cambiare la proprietà display dei fogli di stile di un determinato elemento.

Vogliamo creare due funzioni javascript che operano sulla proprietà display di in oggetto, con una funzione metteremo a none questa proprietà, con l’altra la imposteremo a block.

Per prima cosa abbiamo necessita di creare un tag html con l’attiributo id impostato, in questo esempio utilizzeremo il tag div.

Stiamo utilizzando l’attributo id perché nel codice javascript vogliamo utilizzare il metodo getElementById() che ci consente di selezionare un elemento tramite il suo id.

<div id="elemento">&nbsp;</div>

Poi andiamo a definire due funzioni javascript show() e hide(), come si può facilmente capire dai nomi hide() nasconderà l’elemento passato come parametro, mentre show() lo mostrerà.

function hide(elemId){
	elem=document.getElementById(elemId)
	elem.style.display="none"
}
function show(elemId){
	elem=document.getElementById(elemId)
	elem.style.display="block"
}

La linea:

elem=document.getElementById(elemId)

assegna alla variabile elem l’oggetto con id elemid.
La linea:

elem.style.display="block" 

modifica la proprietà display di elem, facendo apparire l’elemento.

La linea:

elem.style.display="none"

Fa sparire l’elemento.

Una chiamata di funzione javascript si può effettuare dal codice html utilizzando un bottone o un link.

Le chiamate si possono effettuare attraverso il tag a

<a href="javascript:hide('elemento')">Nascondi</a>
<a href="javascript:show('elemento')">Mostra</a>

Le funzioni javascript hide e show sono parametriche, quindi è necessario passare l’id dell’elemento da mostrare/nascondere. Queste funzioni possono essere usate con elementi con id diversi.

Scarica il file di esempio.