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.

Just wonder if you have 1 p tag and want to increase only that one like an animation or if you want to have every p tag with higher font size. — Luckyfella
– Luckyfella, Commented Mar 31, 2018 at 7:33

CertainPerformance · Accepted Answer · 2018-03-31 07:25:36Z

3

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>

answered Mar 31, 2018 at 7:25

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2018-03-31 07:52:06Z

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>

edited Mar 31, 2018 at 7:52

answered Mar 31, 2018 at 7:44

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Ru Chern Chong · Accepted Answer · 2019-10-07 23:48:59Z

2

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.

edited Oct 7, 2019 at 23:48

answered Mar 31, 2018 at 7:23

Ru Chern Chong

3,78613 gold badges36 silver badges43 bronze badges

Comments

Parthiban Mani · Accepted Answer · 2023-10-12 05:50:24Z

0

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>

Dfhg

answered Oct 12, 2023 at 5:50

Parthiban Mani

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

increase font size iteratively using javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related