How can I increase the font size using jquery?

Question

I am trying:

    $('a[data-text="size-bigger"]').click(function ()
      {
        a=$('span');
        b=$('span').css('font-size');
        a.css('font-size', b+1);
      }
    );

I had it working fine for just directly setting the size. Now I am trying to make it relative based on the previous size, ie "zoomable" - click the link and the spans increase in size, but it has no effect, what might be wrong ?

Answer 1

Try this:

$('a[data-text="size-bigger"]').click(function(){
        a=$('span');
        b=parseInt($('span').css('font-size'));
        b=b + 1 + "px";
        a.css({'font-size':b});
});

$('span').css('font-size') is going to give you a string (ex. 12px ). If you want to increment the number, you'll need to extract the number from that string with parseInt() . parseInt('12px') will give you 12 , which you can increment ( 13 ) and, after you add px back, you can set the font-size to your newly incremented number.

DEMO

Answer 2

You can use parseInt to get the Integervalue of the font-size attribute:

$('a[data-text="size-bigger"]').click(function(){
    a = $('span');
    var fontSize = $('span').css('font-size').val();
    var newFontSize = parseInt(fontSize.replace('px','')) + 1 + 'px';
    a.css({'font-size':newFontSize});
});

I'm not sure if you have to replace the px or em with '' or it will work without this. Give it a try ;)