Ejercicio 31 (continuación) — Display y Visibility

Esta continuación del ejercicio 31 añade un nuevo elemento para trabajar con la propiedad visibility, que permite ocultar elementos sin que desaparezca el espacio que ocupan. También se añade un segundo botón para alternar entre visibility: visible y visibility: hidden, diferenciándolo del comportamiento de display: none.

Enunciado

Añadir un elemento adicional para probar visibility.
Crear un nuevo botón que cambie la propiedad visibility del elemento.
Mantener el botón original que cambia la propiedad display.
Comparar visualmente las diferencias entre display y visibility.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio Display</title>
    <link rel="stylesheet" href="display.css">
</head>
<body>

    <h1>Ejercicio Display</h1>

    <p class="explicacion">
        La propiedad <b>display</b> controla cómo se comportan los elementos.
        La propiedad <b>visibility</b> permite ocultarlos sin perder el espacio ocupado.
    </p>

    <h2>Elementos de prueba</h2>

    <div class="bloque">Soy un div con display: block</div>

    <span class="inLine">Inline 1</span>
    <span class="inLine">Inline 2</span>
    <span class="inLine">Inline 3</span>

    <p class="inLineBlock">Caja 1</p>
    <p class="inLineBlock">Caja 2</p>
    <p class="inLineBlock">Caja 3</p>

    <div id="oculto">Soy un elemento oculto (display: none)</div>

    <div id="visibilidad">Soy un elemento con visibility</div>

    <button id="mostrar">Mostrar elemento oculto (display)</button>
    <button id="toggleVisibilidad">Cambiar visibility</button>

    <script>
        document.getElementById("mostrar").onclick = () => {
            document.getElementById("oculto").style.display = "block";
        };

        let visible = true;
        document.getElementById("toggleVisibilidad").onclick = () => {
            visible = !visible;
            document.getElementById("visibilidad").style.visibility =
                visible ? "visible" : "hidden";
        };
    </script>

</body>
</html>

Código CSS

/* 1. display: block */
.bloque {
    display: block;
    background-color: rgba(0, 248, 21, 0.973);
}

/* 2. display: inline */
.inLine {
    display: inline;
    background-color: rgb(183, 0, 255);
}

/* 3. display: inline-block */
.inLineBlock {
    display: inline-block;
    background-color: aqua;
}

/* 4. display: none */
#oculto {
    display: none;
    background-color: #ff00b3;
}

/* 5. visibility */
#visibilidad {
    background-color: #ac55f3;
    visibility: visible;
}

🚀 Ver resultado del ejercicio