Changing Font Sizes

Question: I am working as a web developer. I have one problem with JavaScript. Could you please help me. My problem is that using the command I want to change the browser font size but it is not working. Actually I had done the program but by using that I can change only the body size but I want to change the browser text size to larger.

Answer: You can't change the font settings of the browser itself from JavaScript. You can only change the size of the font used in the currently displayed web page as that is all that JavaScript has access to.

To change the font size used for the whole web page you would use the following JavaScript statement:

document.getElementsByTagName('body')[0].style.fontSize = '110%';

This would increase the sizes of all of the fonts defined within the web page to be 10% bigger than they were previously (assuming that you start with the font size on the body set to 100% and have all the font sizes in the page defined using em and not a totally inappropriate and non-scalable measure such as px).

To change the font size for just one section of the page having a specific id (eg. thissec) you would use the following:

document.getElementById('thissec').style.fontSize = '1.1em';

Both of those examples make the targetted content 10% bigger. If you want to scale it by a different amount then you would of course assign a different value.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow