Cómo mostrar u ocultar un elemento en el sitio web usando JavaScript

A lo largo del desarrollo web, los usuarios deben ocultar o mostrar algunos elementos. Estos elementos pueden ser un botón, algo de animación o una barra de navegación, etc. La mayoría de las veces el usuario quiere que un botón o una barra de navegación sea visible para el punto de vista del escritorio, pero no para el punto de vista móvil.

Con JavaScript, los usuarios pueden ocultar o mostrar fácilmente un elemento en la página web, dependiendo del comportamiento del usuario. En este artículo veremos cómo se usa JavaScript para este propósito.

Ocultar y mostrar elementos en JavaScript

Usando JavaScript, podemos ocultar o mostrar un elemento en la página web usando:

• estilo.mostrar
• estilo.visibilidad

Entendamos cada uno de ellos por separado con ejemplos y luego comparemos cómo difieren entre sí:

Cómo usar el estilo.Pantalla en JavaScript: La propiedad de visualización representa un elemento que debe mostrarse en su página web ... el uso de este usuario puede ocultar todo el elemento, y la página está construida ya que el elemento anterior no estaba allí en absoluto.

Sintaxis:

Aquí en comas, se debe definir un valor para mostrar el contenido o no. Aquí hay un ejemplo:

Para ocultar el elemento: estilo.Display = "Ninguno":

Haga clic en el botón "Ocultar Me" para ocultar el elemento div:

A medida que el usuario hace clic en el botón, se llama a la función para ocultar el elemento. Esto se hace asignando ningún valor al estilo.mostrar.

Ahora mire la salida, cómo el botón ocupaba el espacio de la imagen. Así es como funciona la pantalla, oculta el elemento por completo y reconstruye la página como si el elemento no estuviera allí en primer lugar.

Para mostrar un elemento: estilo.display = "" o "bloque":

Haga clic en el botón "Mostrarme" para mostrar el elemento del elemento div:

Ahora de manera similar, para mostrar el elemento del botón se movió y proporcionó espacio al elemento cuando la pantalla se cambió desde el estilo.Display = "Ninguno" al estilo.display = "".

De estas maneras, el elemento se mostrará o se ocultará completamente y no solo su visibilidad. La página será reconstruida de acuerdo con estos comportamientos.

Cómo usar el estilo.Visibilidad en JavaScript: La visibilidad del estilo funciona de manera similar, pero la diferencia es que solo la visibilidad del elemento está oculta al lector de pantalla. Esto significa que el elemento no se elimina del flujo de la página, por lo tanto, dejando espacio para él en la página.

Sintaxis:

Aquí en comas, un valor de "oculto" o "" no se debe definir ningún valor para mostrar el contenido o no. Para comprender mejor esto, aquí hay un ejemplo:

Este es un párrafo.

Este es otro párrafo.

Ahora, aquí, cuando se hizo clic en el botón, ATO oculta la visibilidad, solo lo ocultó para el ojo del espectador.

En esto, el espacio en la página web no estaba ocupado por el elemento. Esto muestra cómo estilo.pantalla y estilo.visibilidad diferir de.

Conclusión

Todos quieren esconder o mostrar algunos elementos particulares en su página web. En este cómo guiar, aprendimos formas de cambiar la visibilidad de los elementos en la página web utilizando JavaScript. Hay dos formas específicas, pero difieren un poco entre sí. Usando estilo.mostrar El contenido se oculta y su espacio está ocupado por el otro contenido. Mientras que, usando estilo.visibilidad, El contenido solo está oculto para el lector, pero todavía está allí, ya que su espacio no puede estar ocupado por otros elementos. Esto es extremadamente útil para los desarrolladores web, ya que los desarrolladores quieren que se oculte algún contenido y otros se muestren de acuerdo con el punto de vista.