Changing font size of a JavaScript number variable

Question

I want to change the font size of a number that is assigned to a variable and then printed out.

var secondsPerMinute = 60;
var minsPerHour = 60;

var hoursPerDay = 24;
var daysPerWeek = 7;
var weeksPerYear = 52;
var secondsPerDay =  secondsPerMinute*minsPerHour*hoursPerDay;
document.write(secondsPerDay);
var alpha = "blah";
document.write(alpha.fontsize(10));

Here I want to change the font size of the output secondsPerDay .. for some reason .fontsize() does not work on it. I am new to javascript so apologies if this seems like a foolish question.

Does the line document.write(alpha.fontsize(10)); change the size of that output? If so, why aren't you doing the same thing when you output secondsPerDay? — Theresa
– Theresa, Commented Jan 10, 2016 at 13:24
i did try it, but for some reason it only seems to work on strings — sahil sanwal
– sahil sanwal, Commented Jan 10, 2016 at 13:36

Community · Accepted Answer · 2017-05-23 10:28:16Z

3

According to the MDN page on String#fontsize:

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

Nor should you use document.write, for many reasons.

Write output into HTML elements defined on your page, styled using CSS. For example:

<span id="secondsPerDay" style="font-size: 10px; "></span>

document.getElementById('secondsPerDay').textContent = secondsPerDay;

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jan 10, 2016 at 13:28

user663031

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

Comments

gurvinder372 · Accepted Answer · 2016-01-10 13:34:35Z

1

change the last line to

document.write("<span style='font-size:10px;'>"+secondsPerDay+"</span>");
document.write("<span style='font-size:10px;'>"+alpha+"</span>");

use font-size property of the css

after checking @torazaburo's answer, try to use innerHTML rather than document.write

document.body.innerHTML += "<span style='font-size:10px;'>"+secondsPerDay+"</span>";
document.body.innerHTML += "<span style='font-size:10px;'>"+alpha+"</span>";

edited Jan 10, 2016 at 13:34

answered Jan 10, 2016 at 13:22

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

sahil sanwal Over a year ago

sorry if i could not mention the question clearly.. i want to change font size of the variable- secondsPerDay , not alpha. however thanks for taking out the time

gurvinder372 Over a year ago

@sahilsanwal sure, check the update. However Nick-Zuber's answer looks fine

Nick Zuber · Accepted Answer · 2016-01-10 13:42:44Z

1

EDIT:

The fontsize function is a deprecated method from the String object and you should avoid using it. See some of the other solutions people have posted as a safer alternative.

I recommend outputting HTML and setting the font-size using inline CSS:

document.write('<span style="font-size: 10px">' + secondsPerDay + '</span>');
                             ^^^^^^^^^^^^^^^

Updated fiddle

~~You have to also apply fontsize() to the secondsPerDay:~~

~~document.write(secondsPerDay.toString().fontsize(10));~~

~~See your working code here.~~

edited Jan 10, 2016 at 13:42

answered Jan 10, 2016 at 13:24

Nick Zuber

5,6873 gold badges26 silver badges50 bronze badges

2 Comments

sahil sanwal Over a year ago

thanks a lot that did work.. but is there possibly a way that i could change the font size without converting it to string.

Nick Zuber Over a year ago

@sahilsanwal Unfortunately there isn't because fontsize is a method of the String object. However, you could just keep two versions of the variable - string and number

Collectives™ on Stack Overflow

Changing font size of a JavaScript number variable

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related