Introduction

Dynamically changing the size of a font is relatively easy. For example, if we wanted to change the font size of an element we could grad the elements id value and then alter the font size with this tiny function;

function changefontSize(id) {
document.getElementById(id).style.fontSize = "18px";
}

The above works quiet well for those cases we want to target individual elements, but if we wanted to change things on a more global level we would need an entirely different way of doing things. So let's demonstrate how:

The first thing we need to do is create an array. This array will hold all the tags that we want to affect with a text size change. You can add or delete tags to suit.

var tags = new Array('div','td','tr','p','b','span','table','strong','emphasis','a','h1',
'h2','h3','pre','sub','sup','i','th','cp','ul','ol','li','dt','dd');

Then we will need an array to hold the font sizes for us. In this instance, I have created two arrays, one will hold the values for pixels and the other for em, as these two measurement units seem to be the flavour of the month.

var pixelArray = new Array('10','12','14','18','24','30','40');
var emArray = new Array('0.7','0.9','1.0','1.5','2.0','2.5','3');

We need a little variable that will set the initial value position of the arrays;

var initSize = 3;

Remember that arrays begin at 0 position and increment upwards, so for example the number 3 position in the pixelArray would represent the value of 18.

Let's move to the main function that puts all this together for us;