Cómo ocultar y mostrar elementos DOM usando JavaScript

Hay varias formas de mostrar u ocultar elementos DOM en JavaScript estándar. En este artículo, veremos dos formas diferentes de ocultar o mostrar elementos DOM usando JavaScript.

Uso del estilo display Propiedad

El estilo display La propiedad se utiliza para establecer y obtener el tipo de visualización del elemento en JavaScript.

La mayoría de los elementos HTML tienen el en línea o bloquear tipo de visualización. El contenido de un elemento en línea flota a sus lados izquierdo y derecho. Los elementos HTML de bloque son diferentes porque * llenan* toda la línea y no muestran el contenido en sus lados.

Para ocultar un elemento, establezca el display propiedad a none :

document.querySelector('.btn').style.display = 'none';

Para mostrar un elemento, establezca el display propiedad a block (o cualquier otro valor excepto none ):

document.querySelector('.btn').style.display = 'block';

Uso del estilo visibility Propiedad

Otra forma de mostrar u ocultar elementos DOM en JavaScript es usando el estilo visibility propiedad. Es similar al anterior display propiedad. Sin embargo, si establece display: none , oculta todo el elemento del DOM, mientras que visibility:hidden oculta el contenido del elemento, pero el elemento permanece en su posición y tamaño originales.

Para ocultar un elemento, establezca el visibility propiedad a hidden :

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

Para volver a mostrar el elemento, simplemente configure el visibility propiedad a visible como a continuación:

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

El estilo visibility La propiedad solo oculta el elemento pero no elimina el espacio ocupado por el elemento. Si también desea eliminar el espacio, debe establecer display: none usando el display propiedad.

Creando show() y hide() Métodos

jQuery proporciona hide() , show() y toggle() métodos de utilidad que usan estilos en línea para actualizar el display propiedad del elemento.

Usemos el style propiedad para crear los métodos jQuery anteriores en JavaScript estándar:

// hide an element
const hide = (elem) => {
    elem.style.display = 'none';
}

// show an element
const show = (elem) => {
    elem.style.display = 'block';
}

// toggle the element visibility
const toggle = (elem) => {
    
    // if the element is visible, hide it
    if(window.getComputedStyle(elem).display !== 'none') {
        hide(elem);
        return;
    }

    // show the element
    show(elem);
}

Ahora, para ocultar o mostrar cualquier elemento DOM, solo use los métodos anteriores como se muestra a continuación:

// hide element
hide(document.querySelector('.btn'));

// show element
show(document.querySelector('.btn'));

// toggle visibility
toggle(document.querySelector('.btn'));

Observe el uso del getComputedStyle() método, que acabamos de aprender el otro día, para comprobar si un elemento ya está visible.

Usamos este método porque el style propiedad solo trata con estilos en línea especificados usando el style del elemento atributo. Pero el elemento podría ocultarse a través de un <style> incrustado elemento o incluso una hoja de estilo externa. El getComputedStyle() El método devuelve los estilos CSS reales que se usaron para representar un elemento HTML, independientemente de cómo se definieron esos estilos.

Otra cosa a tener en cuenta es el getComputedStyle(elem).display !== 'none' declaración. No estamos comprobando si el tipo de visualización es block porque block no es el único manera de mostrar un elemento. Podrías usar flex , inline-block , grid , table , etc. para el display propiedad para mostrar un elemento. Sin embargo, para ocultar un elemento, solo hay un valor que es display: none .

Si prefiere usar una clase CSS para ocultar y mostrar elementos DOM en lugar de estilos en línea, consulte esta guía.