3 - Accediendo a un elemento HTML a través del DOM (getElementById)



Problema:Permitir cambiar el tamaño de la fuente de un párrafo. Para esto crear tres botones (fuente pequeña (10), fuente mediana(13) y fuente grande(20))
<!DOCTYPE html>
<html lang="es">

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

<body>
    <p id="comentarios">Este texto pertenece al párrafo. Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al
        párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.Este texto pertenece al párrafo.</p>

    <input type="button" id="boton1" value="Fuente pequeña" onClick="cambiarFuente('10px')">
    <input type="button" id="boton2" value="Fuente mediana" onClick="cambiarFuente('13px')">
    <input type="button" id="boton3" value="Fuente grande" onClick="cambiarFuente('20px')">
    <script src="funciones.js"></script>
</body>

</html>
#titulo {
    text-align: center;
}

#boton1,
#boton2,
#boton3 {
    text-align: center;
    width: 200px;
}
function cambiarFuente(tam) {
    let tit = document.getElementById('comentarios')
    tit.style.fontSize = tam
}
Ver solución


Retornar