53 - Propiedad className
Problema:
Confeccionar un algoritmo que permita mostrar/ocultar una sección en una página HTML.
Inicialmente el mensaje se encuentra oculto y debemos hacer clic en el enlace para mostrarlo. Luego si hacemos nuevamente clic volvemos a ocultarlo.
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!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>
.mensajeoculto { display: none; } .mensajevisible { color: #aaf; background-color: #ff0; display: block; font-size: 30px; width: 400px; border: 1px solid #00f; padding: 5px; }
document.getElementById('enlace').addEventListener('click', () => { let ele = document.querySelector('#mensaje') if (ele.className == 'mensajeoculto') ele.className = 'mensajevisible' else ele.className = 'mensajeoculto' })
No tiene disponible el navegador la capacidad de iframe
Retornar