Controlling Font Size With Javascript

Brief :-

This script will change the font size of any text within a paragraph (

tag). If you wish to change text within other tags edit the getElementsByTagName('p'); part.

In order for this code to work your page must be using pixel sized fonts (px) rather than relative sized fonts using 'em' or '%'. Of course if you do use other font units the code can be easily adapted for these. If the script cannot find the font size of a paragraph it will default it to 12px.

The code :-

var min=8;

var max=18;

function increaseFontSize() {

var p = document.getElementsByTagName('p');

for(i=0;i

if(p[i].style.fontSize) {

var s = parseInt(p[i].style.fontSize.replace("px",""));

} else {

var s = 12;

}

if(s!=max) {

s += 1;

}

p[i].style.fontSize = s+"px"

}

}

function decreaseFontSize() {

var p = document.getElementsByTagName('p');

for(i=0;i

if(p[i].style.fontSize) {

var s = parseInt(p[i].style.fontSize.replace("px",""));

} else {

var s = 12;

}

if(s!=min) {

s -= 1;

}

p[i].style.fontSize = s+"px"

}

}

Usage :-

Include the above code in your page (either by placing it within the head section or placing it in an external js file and importing it). You can then call the increase and decrease font size functions like below.

<a href="javascript:decreaseFontSize();">-a> 

<a href="javascript:increaseFontSize();">+a>



Example: http://www.white-hat-web-design.co.uk/articles/js-fontsize.php