53 - Propiedad className


La propiedad className obtiene y establece el valor del atributo class del elemento HTML especificado.

El nombre de este atributo: 'className' es utilizado para esta propiedad en lugar de 'class' para evitar conflictos con la palabra clave "class"

Problema

Confeccionar un algoritmo que permita mostrar/ocultar una sección en una página HTML.

Inicialmente debe haber un mensaje que se encuentre oculto y debemos hacer clic en un enlace para mostrarlo.

Luego si hacemos nuevamente clic volvemos a ocultarlo.

pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body>
    <div class="mensajeoculto" id="mensaje">
        Todo este texto permanece oculto hasta que se presiona el enlace de la parte inferior.
    </div>
    <a href="#" id="enlace">Mostrar/Ocultar Mensaje.</a>
    <script src="funciones.js"></script>
</body>

</html>

estilos.css

.mensajeoculto {
    display: none;
}

.mensajevisible {
    color: #aaf;
    background-color: #ff0;
    display: block;
    font-size: 30px;
    width: 400px;
    border: 1px solid #00f;
    padding: 5px;
}

funciones.js

document.getElementById('enlace').addEventListener('click', () => {
    let ele = document.querySelector('#mensaje')
    if (ele.className == 'mensajeoculto')
        ele.className = 'mensajevisible'
    else
        ele.className = 'mensajeoculto'
})

Para resolver este problema cuando se presiona el hipervinculo procedemos a extraer el nombre de la clase asignada al elemento. En el caso que contenga el valor 'mensajeoculto' procedemos a cambiar por la clase 'mensajevisible' (esta otra clase hace visible el elemento HTML):

    let ele = document.querySelector('#mensaje')
    if (ele.className == 'mensajeoculto')
        ele.className = 'mensajevisible'
    else
        ele.className = 'mensajeoculto'

Retornar