Intercambiar la Visibilidad de un Elemento usando JavaScript

Last updated Aug 6, 2023 Edit Source

• Programming
• Frontend
• Javascript

Para saber como cambiar la visibilidad de un objeto en JavaScript primero debemos tener un poco de conocimiento sobre la Manipulacion del DOM.

Como sabemos, mediante la Manipulacion del DOM se pueden cambiar los estilos de cualquier bloque del documento HTML.

Existen dos propiedades particulares que nos dejaran cambiar la visibilidad de los elementos:

1
2
3
4

display: none;
display: block;
display: inline;
display: inline-block;

1
2

visibility: visible;
visibility: hidden;

Una vez conocemos las propiedades necesarias para ocultar y mostrar un elemento, su aplicacion con JavaScript seria la siguiente:

1

document.querySelector('.clase').style.PROPIEDAD = 'VALOR';

En donde PROPIEDAD puede ser visibility o display y VALOR puede ser cualquiera de los valores respectivos para la propiedad.

Aqui hay un codepen de demostracion que podria ser relevante.

Ocultar

1

document.querySelector('.selector').style.visibility = 'hidden';

Mostrar

1

document.querySelector('.selector').style.visibility = 'visible';