Ocultar elemento con JavaScript

Modificar la visibilidad de los elementos en una página web es una de las interacciones más comunes en el desarrollo Frontend. En este tutorial, exploraremos el uso de las propiedades visibility y display mediante JavaScript nativo, y cómo manejar el flujo del documento de manera avanzada.

1. La propiedad visibility

El método más directo para ocultar visualmente un elemento sin alterar la estructura del diseño es el uso de style.visibility. Cuando un elemento toma el valor "hidden", se vuelve invisible, pero sigue ocupando su espacio físico original en la pantalla.

Nota importante: Este método mantiene el ancho y el alto del elemento intactos dentro del flujo del documento, dejando un hueco en blanco.

Ejemplo 1: Ocultar una etiqueta manteniendo su espacio

Imagina que tienes una interfaz donde no quieres que los elementos adyacentes se muevan de su sitio cuando uno desaparece.

HTML

HTML

<div class="contenedor">
    <button id="miBoton">Guardar cambios</button>
    <p>Este texto no se moverá de su posición original.</p>
</div>

JavaScript

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    // Seleccionamos el elemento por su ID
    let boton = document.getElementById("miBoton");
    
    // Ocultamos el elemento visualmente (sigue ocupando espacio)
    boton.style.visibility = "hidden";
    
    // Si quisiéramos mostrarlo de nuevo usaríamos:
    // boton.style.visibility = "visible";
});

2. La propiedad display

Si lo que necesitas es eliminar por completo el elemento del diseño de la página, la propiedad idónea es style.display. Al asignar el valor "none", el elemento desaparece y el resto del layout se reorganiza de manera automática para ocupar su lugar.

Ejemplo 2: Colapsar un párrafo o caja de alerta

Ideal para cerrar notificaciones o alertas dinámicas donde el espacio debe ser reaprovechado inmediatamente.

HTML

HTML

<div class="noticias">
    <div id="alerta-error" class="alerta">Hubo un fallo en la conexión.</div>
    <p>Este texto subirá y ocupará el espacio de arriba si la alerta se oculta.</p>
</div>

JavaScript

JavaScript

// Buscamos la caja de alerta por su ID
let alerta = document.getElementById("alerta-error");

// Ocultamos por completo colapsando el espacio del layout
alerta.style.display = "none";

3. ¡Cuidado! Espacios en blanco vs. Valores por defecto

El uso de style.display = "none" tiene un comportamiento drástico. Si necesitas volver a mostrar el elemento, recurrir ciegamente a style.display = "block" puede romper tu diseño si el elemento original no era un bloque de manera nativa (por ejemplo, si era un <span> inline, un <a> o un <button>).

Si quieres evitar problemas de compatibilidad con tus estilos CSS externos, la mejor práctica al re-mostrar un elemento es asignar una cadena vacía "". Esto le indica a JavaScript que elimine el estilo incrustado (inline) y herede de nuevo el comportamiento real del CSS:

JavaScript

// Solo seleccionará y restaurará el tipo de display original (block, inline, flex, etc.)
let elemento = document.getElementById("miElemento");
elemento.style.display = ""; 

4. Resumen de buenas prácticas

• Flujo del Layout: Elige visibility: hidden si quieres un lienzo invisible pero respetando las distancias de los elementos contiguos. Usa display: none cuando requieras un menú colapsable, pestañas o modales.
• Estilos inline: Recuerda que al modificar .style, estás añadiendo CSS inline directamente en la etiqueta HTML. Esto tiene una especificidad muy alta y sobreescribirá tus archivos .css.
• Sintaxis: Recuerda usar comillas dobles o simples para definir los valores de propiedad en JavaScript: style.display = "none".

5. Resumen Comparativo

Propiedad y Valor	Efecto en el Layout	¿Interactuable?	Uso recomendado
visibility = "hidden"	Oculto, pero mantiene el espacio físico	No	Elementos asíncronos que no deben alterar el diseño al aparecer/desaparecer.
visibility = "visible"	Visible en su espacio asignado	Sí	Restaurar visibilidad básica sin alterar el tipo de caja CSS.
display = "none"	Oculto por completo, colapsa el espacio	No	Menús desplegables, modales, pestañas interactivas y alertas cerrables.
display = "block" (o "")	Muestra el elemento reajustando el layout	Sí	Volver a mostrar secciones estructuradas o contenedores condicionales.

Conclusión

Manipular la visibilidad mediante JavaScript nativo ofrece un rendimiento óptimo y limpio. Mientras que visibility es idóneo para conservar la simetría visual de la maquetación intacta, el uso de display: none y su posterior restauración con "" te dará un control total y dinámico sobre las interfaces modernas.