resizing text of whole document using jquery
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);
v开发者_如何学编程ar 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
Could you not just set the font-size property on the BODY element to be 125% or 150%?
$("body").css("font-size", "150%");
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.
精彩评论