Changing Your Blog's Font Size in Real Time

Here today, let's see how JavaScript can be used to change the font size of your blog pages in real time. This is pretty convenient for your readers as they will be able to increase the size of the text at their wish.

Just include the following JS code in the head section of your blog (after <head> tag) or import through an external JS file. Please note, with this code, we are increasing and decreasing the font size for the entire body HTML element. If you wish to localize the effect, use a separate tag such as 'p', 'font', or 'span', and use the tag on the body of your HTML.

var minSize=6;
var maxSize=24;
function plusFont() {
var s = document.getElementsByTagName('body');
for(i=0;i<s.length;i++) {
if(s[i].style.fontSize) {
var t = parseInt(s[i].style.fontSize.replace("px",""));
} else {
var t = 10;
}
if(t!=maxSize) {
t += 1;
}
s[i].style.fontSize = t+"px";
}
}
function minusFont() {
var s = document.getElementsByTagName('body');
for(i=0;i<s.length;i++) {
if(s[i].style.fontSize) {
var t = parseInt(s[i].style.fontSize.replace("px",""));
} else {
var t = 12;
}
if(t!=minSize) {
t -= 1;
}
s[i].style.fontSize = t+"px";
}
}

Here are the buttons to increase and decrease font size: In order to see the code in action, simply click these buttons now.
You need to create buttons like these on your blog's page as well with the following HTML code.
<INPUT TYPE="button" VALUE="+" onClick="plusFont();"> <INPUT TYPE="button" VALUE="-" onClick="minusFont();">

3 Opinions:

  1. Why bother?

    This is a built-in feature of browsers.

    Why bother to duplicate existing functionality?

    ReplyDelete
  2. Great tip...
    But I had one doubt, If you change the font dynamically, will the page elements change their position,like sidebar moving from side to below the main post bar.(I hope I am able to explain it correctly).

    ReplyDelete
  3. @Thorne, this is a built-in functionality for several browsers. But there are browsers without this functionality, and there are people who don't know about it at all. It's just a convenience.

    @Amol, No they won't. To know, just try the buttons in the post.

    ReplyDelete

Comments are moderated very strictly