increase font size iteratively using javascript

Question

var text = document.querySelector('p')
for(var i=10px; i<=40px; i++)
  text.style.fontSize = i; 

I want a script which increases the font size in every iteration of the for-loop. The above code is the prototype of my requirement (which won't work since pixels can't be assigned to a variable). Help me providing the correct code.

Answer 1

var text = document.querySelector('p')

for (var i = 10; i <= 40; i++) {
  text.style.fontSize = i + 'px';
}

You cannot append px in the loop since it has to be an integer.

Answer 2

You probably want to use setTimeout recursion instead, so the text doesn't increase in size instantly:

 var text = document.querySelector('p'); function increaseTextSize(size) { text.style.fontSize = size + 'px'; if (size <= 40) setTimeout(increaseTextSize, 50, size + 1); } increaseTextSize(10); 

 <p>my text</p> 

Answer 3

You can also try out this demo using CSS transition effect:

 // After 500ms change the font from 10 to 60px // and css will take care of the rest setTimeout(() => { var text = document.querySelector('p'); text.style.fontSize = '60px'; text.style.color = 'blue'; // <-- you can also add color effects, if you want }, 500); 

 p { font-size: 10px; color: red; -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; -ms-transition: all 2.5s ease; } 

 <p>Hello World!</p>