resizing text of whole document using jquery

Question

i want to resize the font of all elements of a page like user can click increaseFont or decreaseFont this will decrease the fonts of all elems iam doing doing as writen below please suggest some better way

$.fn.ChangeFont=function(ratio)
{
return this.each(function(){
var _elm=$(this);
var currFontSize = _elm.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
finalNum *= ratio;
finalNum=finalNum + stringEnding;
_elm.css('fontSize',finalNum);
});
}

$(document).find('*').andSelf().ChangeFont(1.2);//a value bigger than 1 for increase
$(document).find('*').andSelf().ChangeFont(.8);//a value smaller than 1 for decrease

Answer 1

Could you not just set the font-size property on the BODY element to be 125% or 150%?

$("body").css("font-size", "150%");

Answer 2

This is dependent on how the rest of your CSS is structured and what units you are using to assign font-sizes in the rest of the page. If you are using em or % then it is enough to do just like Chase Seibert says:

$("body").css("font-size", "150%");

So simply use the correct units in your CSS and then manipulate the main body text-size. Otherwise you can also choose an element like a div which acts as the root element of all textual content on the page you are creating.

As a comment by @praveen also says is that this will not necessarily affect you non-textual content.