3 - Accediendo a un elemento HTML a través del DOM (getElementById)
Problema:
Disponer una etiqueta h1 con un mensaje. Luego dos botones que permitan cambiar el color y el tamaño de la fuente.
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> <h1 id="titulo">Este es un título dinámico</h1> <input type="button" value="Cambiar Color" onClick="cambiarColor()"> <input type="button" value="Cambiar Tamaño de Fuente" onClick="cambiarTamanoFuente()"> <script src="funciones.js"></script> </body> </html>
#titulo { text-align: center; } #boton1, #boton2 { text-align: center; width: 200px; }
function cambiarColor() { let tit = document.getElementById('titulo') tit.style.color = '#ff0000' } function cambiarTamanoFuente() { let tit = document.getElementById('titulo') tit.style.fontSize = '60px' }
No tiene disponible el navegador la capacidad de iframe
Retornar