Each Click I want to increase the font size using jquery

Question

Hello, For each click I want to increase the font size.

$('#fontplus').each(function('click') {
    var fs = $('#bod').css('font-size');
    $('#bod').css('font-size',fs+1);

});

<div id="fontplus">+</div>

Thanks Jean

Answer 1

   var bod;
   var fontPlus;
   $(document).ready(function() {
      bod = $('#bod');
      fontPlus = $('#fontPlus');
      fontPlus.click(function() {
         var fontSize = bod.css('font-size');
         var fontSizeNum = parseFloat(fontSize, 10);
         bod.css('font-size', fontSizeNum * 1.2);
      });
   });

more info and examples here

Answer 2

You need to handle the click event:

$('#fontplus').click(function() {
    var fs = $('#bod').css('font-size');
    $('#bod').css('font-size',fs+1);
});

You will need to set the initial font-size in CSS to an integer value.

Answer 3

Well as you have probably discovered, that won't work.

$('#fontplus').click(function() {
  var fs = $('#bod').css('fontSize');

Now you have the current font size. However, what is it? Is it "12px"? Or perhaps it's "1.5em"? Well, assuming you control that, what you'll need to do is take apart the current setting and then put together the new value:

  $('#bod').css('fontSize', (parseInt(fs, 10) + 1) + 'px');
});

Answer 4

Do you actually want them to be able to do this infinitely? I would suggest having 3 or 4 different CSS classes to represent each available font size and manage it with jQuery.

The other examples don't even consider the units used! Points? Pixels? .css("font-size") will return that, so doing a ++ won't work.

$("#fontplus").click(function() {
    switch($("#bod").attr("className"))
    {
        case "large" : /* do nothing */ break;
        case "medium" : $("#bod").removeClass("medium").addClass("large"); break;
        /* do as needed */
    }
});

and I would have each css class look like:

.large { font-size: 1.4em; }
.medium { font-size: 1.2em; }
.normal { font-size: 1em; }
.small { font-size: .8em; }