Mostrar / Ocultar elementos HTML con JavaScript

Inicio > Javascript > Mostrar / Ocultar elementos HTML con JavaScript

Mostrar / Ocultar elementos HTML con JavaScript

Leave a comment Go to comments 12 de enero 2009 Hitesh Agrawal Deja un comentario Ir a comentarios

Cuando se trata de mostrar u ocultar los elementos HTML, podemos realizar esta operación en JavaScript de dos maneras:

visibilidad
mostrar

Para utilizar la visibilidad y la pantalla en javascript que estamos obligados a utilizar el atributo "style", este método representa el acceso a los atributos CSS en Javascript.

style.visibility:
style.visibility, se oculta el elemento, sino que ocupan el espacio asignado al elemento HTML. Para utilizar style.visibility tenemos que pasar uno de los dos valores "visibles" y "oculto".

Ejemplo:
Listado de elementos HTML con JavaScript:

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

Ocultación de elementos HTML con JavaScript:

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

style.display:
style.display, se oculta el elemento y no va a ocupar el espacio. Para utilizar style.display necesitamos pasar cualquiera de estos valores "en línea" o "bloquear" o "ninguna";

NOTA:
En algunos casos se encuentra valor en blanco (Ejemplo: "") pasa a obtener style.display en lugar de "en línea" o "bloquear" o "ninguna". Con la aprobación de valor en blanco le estamos diciendo al navegador para usar el valor por defecto para ocultar el elemento. Se recomienda no utilizar el valor en blanco mientras usa la propiedad style.display.

Nombre de la propiedad	Descripción
en línea	Mostrará el elemento HTML sin ningún tipo de salto de párrafo
bloque	Mostrará el elemento HTML con salto de párrafo
ninguno	, Se oculta el elemento HTML

Ejemplo:
Listado elemento HTML con el artículo de descanso:

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

Ocultación de elementos HTML:

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

Listado de elementos HTML sin Apartado de descanso:

  'html element id' ) . style . display = "inline" ; documento. getElementById ('id elemento html "). estilo. display =" en línea ";

Código Demostración:

 <html> type="text/javascript"> <script <head> función hideElementByVisible obj) ((document.getElementById (obj). style.visibility = "hidden";) function showElementByVisible (obj) (document.getElementById (obj) . style.visibility = "visible";) hideElementByDisplay función obj) ((document.getElementById (obj). style.display = "none";) function showElementDisplay (obj) (document.getElementById (obj). style.display = " en línea ";) showElementByDisplay función (obj, prop) (if (prop ==" block ") (document.getElementById (obj). style.display =" block ";) else if (prop ==" en línea ") (document . getElementById (obj). style.display = "en línea";)) </ script> </ head> <body> tipo de entrada <= "text" name = "txtName" id = "txtName" value = "TextBox1" / > <input type="text" name="txtname1" id="txtname1" value="TextBox2" /> <br /> visible: <br /> <input type = "button" value = "Ocultar Element - TextBox1" onClick = "hideElementByVisible ('txtName');" /> <input type="button" value="Show en elementos TextBox1" onClick="showElementByVisible('txtname');" /> <br /> <br /> Display : <br /> <input type="button" value="Hide en elementos TextBox1" onClick="hideElementByDisplay('txtname');" entrada tipo /> <= "button" value = "Mostrar elementos - TextBox1" onClick = "showElementDisplay ('txtName');" /> <br /> <br /> <br apartado Mostrar /> <input type = "button" value = "Mostrar elementos con el artículo - TextBox2" onClick = "showElementByDisplay ('txtName' , 'block'); "/> </ body> </ html>