How to increment font size changes with jQuery?

Question

Hi I want to change the font size of the page incrementally with jQuery how do I do that?

Something like:

$('body').css({'font-size':'+.01px'});
$('body').css({'font-size':'-.01px'});

Answer 1

You could do so :

var fontSize = parseInt($("body").css("font-size"));
fontSize = fontSize + 1 + "px";
$("body").css({'font-size':fontSize});

jsFiddle example here

Answer 2

You can't do it like that because the font propery is stored as a string, if you are sure the font size will be in pixels you could do it like this:

var fontSize = $('body').css('font-size').split('px')[0];

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

That might need modifying slightly I just wrote it without testing.

Answer 3

It might depend on which version of jquery, but I have used the following

HTML

<input type="button" id="button" />
<div id="box"></div>

CODE

$(document).ready(function() {
  $("#button").click(function() {
    $("#box").css("width","+=5");
   });
 });