Mostra / Nascondi elementi HTML utilizzando JavaScript

Home > Javascript > Mostra / Nascondi elementi HTML utilizzando JavaScript

Mostra / Nascondi elementi HTML utilizzando JavaScript

Leave a comment Go to comments 12 gennaio 2009 Hitesh Agrawal Lascia un commento Vai ai commenti

Quando si tratta di mostrare o nascondere qualsiasi elemento HTML, si può eseguire questa operazione in JavaScript in due modi:

visibilità
display

Per utilizzare la visibilità e la visualizzazione in javascript ci sono tenuti ad utilizzare l'attributo "di stile, questo metodo rappresenta il CSS accedere ad attributi in javascript.

style.visibility:
style.visibility nasconderà l'elemento ma occuperà lo spazio allocato per l'elemento HTML. Per utilizzare style.visibility abbiamo bisogno di passare uno dei due valori "visibile" o "nascosto".

Esempio:
Risultati elemento HTML utilizzando JavaScript:

  'html element id' ) . style . visibility = "visible" ; documento. getElementById ('id dell'elemento html'). stile. visibilità = "visibile";

Nascondere elemento HTML utilizzando JavaScript:

  'html element id' ) . style . visibility = "hidden" ; documento. getElementById ('id dell'elemento html'). stile. visibilità = "nascosto";

style.display:
style.display nasconderà l'elemento e non occupare lo spazio. Per utilizzare style.display abbiamo bisogno di passare uno di questi valori "in linea" o "blocco" o "none";

NOTA:
In alcuni casi troverete valore vuoto (Esempio: "") per aver superato style.display invece che "in linea" o "blocco" o "none". Passando valore vuoto stiamo dicendo al browser di utilizzare il valore di default per nascondere l'elemento. Si consiglia di non utilizzare valore vuoto durante l'utilizzo di beni style.display.

Nome proprietà	Descrizione
inline	Mostrerà l'elemento HTML senza alcuna interruzione di paragrafo
blocco	Mostrerà l'elemento HTML con interruzione di paragrafo
nessuno	Nasconderà l'elemento HTML

Esempio:
Risultati elemento HTML con l'art Break:

  'html element id' ) . style . display = "block" ; documento. getElementById ('id dell'elemento html'). stile. display = "block";

Nascondere elementi HTML:

  'html element id' ) . style . display = "none" ; documento. getElementById ('id dell'elemento html'). stile. display = "none";

Risultati elemento HTML senza Paragrafo Break:

  'html element id' ) . style . display = "inline" ; documento. getElementById ('id dell'elemento html'). stile. display = "inline";

Codice Demo:

  <html>
 <head>
 <script type="text/javascript">
	 funzione hideElementByVisible (obj) (
		 document.getElementById (obj). style.visibility = "nascosto";
	 )

	 funzione showElementByVisible (obj) (
		 document.getElementById (obj). style.visibility = "visibile";
	 )

	 funzione hideElementByDisplay (obj) (
		 document.getElementById (obj). style.display = "none";
	 )

	 funzione showElementDisplay (obj) (
		 document.getElementById (obj). style.display = "inline";
	 )

	 funzione showElementByDisplay (obj, prop) (
		 if (prop == "blocco") (
			 document.getElementById (obj). style.display = "blocco";
		 )
		 else if (prop == "inline") (
			 document.getElementById (obj). style.display = "inline";
		 )
	 )


 </ Script>
 </ Head>
 <body>
 <input type="text" name="txtname" id="txtname" value="TextBox1" />
 type="text" <input name="txtname1" id="txtname1" value="TextBox2" /> <br />
 Visibile: <br />
 type="button" <input value="Hide Element-TextBox1" onClick="hideElementByVisible('txtname');" />
 type="button" <input value="Show Element-TextBox1" onClick="showElementByVisible('txtname');" /> <br /> <br />
 Display: <br />
 type="button" <input value="Hide Element-TextBox1" onClick="hideElementByDisplay('txtname');" />
 type="button" <input value="Show Element-TextBox1" onClick="showElementDisplay('txtname');" /> <br /> <br />

 Il paragrafo Mostra <br />
 type="button" <input value="Show Elemento con l'art-TextBox2" onClick="showElementByDisplay('txtname','block');" />
 </ Body>
 </ Html>