Show / Hide Elements HTML usando JavaScript

Home > Javascript > Show / Hide Elements HTML usando JavaScript

Show / Hide Elements HTML usando JavaScript

Leave a comment Go to comments 12 de janeiro de 2009 Hitesh Agrawal Deixe um comentário Ir para os comentários

Quando se trata de mostrar ou esconder qualquer elemento HTML, podemos realizar esta operação em JavaScript de duas maneiras:

visibilidade
mostrar

Para usar a visibilidade e exposição em javascript que são obrigados a utilizar o atributo "do estilo, este método representa a CSS acessar atributos em javascript.

style.visibility:
style.visibility irá ocultar o elemento, mas vai ocupar o espaço alocado para o elemento HTML. Para usar style.visibility precisamos passar um dos dois valores "visível" ou "oculto".

Exemplo:
Mostrando elemento HTML usando JavaScript:

  'html element id' ) . style . visibility = "visible" ; documento. getElementById ('id do elemento html'). estilo. visibilidade = "visible";

Escondendo elemento HTML usando JavaScript:

  'html element id' ) . style . visibility = "hidden" ; documento. getElementById ('id do elemento html'). estilo. visibilidade = "hidden";

style.display:
style.display irá esconder o elemento e não vai ocupar o espaço. Para usar style.display precisamos passar um desses valores "inline" ou "bloco" ou "nenhum";

Observação:
Em alguns casos, você vai encontrar o valor em branco (exemplo: ") passou a ficar style.display em vez de" em linha "ou" bloco "ou" nenhum ". Ao passar em branco o valor que nós estamos dizendo ao navegador para usar o valor padrão para ocultar o elemento. Não é recomendado usar o valor em branco, enquanto usando a propriedade style.display.

Nome da propriedade	Descrição
inline	Irá mostrar o elemento HTML sem quebra de parágrafo
bloco	Irá mostrar o elemento HTML com quebra de parágrafo
nenhum	Vai esconder o elemento HTML

Exemplo:
Mostrando elemento HTML com quebra de parágrafo:

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

Escondendo elemento HTML:

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

Mostrando elemento HTML sem quebra de parágrafo:

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

Demo Code:

  <html>
 <head>
 <script type="text/javascript">
	 função hideElementByVisible (obj) (
		 document.getElementById (obj). style.visibility = "hidden";
	 )

	 função showElementByVisible (obj) (
		 document.getElementById (obj). style.visibility = "visible";
	 )

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

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

	 showElementByDisplay function (obj, prop) (
		 if (prop == "block") (
			 document.getElementById (obj). style.display = "bloco";
		 )
		 else if (prop == "inline") (
			 document.getElementById (obj). style.display inline = "";
		 )
	 )


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

 § <br /> Show
 type="button" <input value="Show Element Com /> onClick="showElementByDisplay('txtname','block');" N-TextBox2"
 </ Body>
 </ Html>