JavaScript - Bucle while para aumentar fuente

 
Vista:
sin imagen de perfil
Val: 28
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Bucle while para aumentar fuente

Publicado por Pedro (18 intervenciones) el 13/09/2022 14:16:33
Buenos días me acaban de pedir que realize un ejercicio, en el cual, a través de un bucle while, tengo que lograr que se aumente la fuente de una frase gradualmente, empezando en 5 px y acabando en 15, que haga 10 iteraciones y muestre por pantalla todas ellas.

No se por donde empezar solo se me ocurre esto, pero claro, no puedo manejar pixeles para aumentar la fuente en un while ni puedo font-size, por lo que no tengo ni idea de como llevar a cabo esto. Agradecería alguna ayuda o si alguien ha hecho algo parecido y puede pasar el código sería perfecto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <p id="parrafo">Este es el texto de prueba</p>
 
</body>
</html>

Javascript

1
2
3
4
5
6
7
8
9
10
11
function aumentar(){
 
document.getElementById("parrafo")
contador = 5;
 
while(contador <=15){
    contador++;
 
}
 
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Bucle while para aumentar fuente

Publicado por Ivan (118 intervenciones) el 13/09/2022 19:50:43
Hola,

lamento decirte que estás equivocado ...
A no ser que lo prohiban las reglas del ejercicio, sí puedes manejar píxeles y sí puedes manejar font-size en un while. Te pongo el ejemplo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script>
    function aumentar(ID){
      let contador = 5;
      let texto = document.getElementById(ID);
      while(contador <=15) {
        texto.style.fontSize = contador+'px';
        alert('Tamaño del texto: '+contador+'píxels');
        texto.style.fontSize = contador+'em';
        alert('Tamaño del texto: '+contador+'ems');
        contador++;
      }
    }
    </script>
</head>
<body>
    <p id="parrafo">Este es el texto de prueba</p>
    <button onclick="aumentar('parrafo')">Aumentar</button>
</body>
</html>

JavaScript permite el control total de los elementos HTML de una página, incluyendo sus atributos CSS.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 28
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Bucle while para aumentar fuente

Publicado por Pedro (18 intervenciones) el 14/09/2022 11:52:53
Ok muchas gracias. Me dijeron que no se podían manejar pixeles ni cosas como font-size en bucles. Ahora se que se pueden usar los elementos de CSS en javascript sin ningun problema
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar