Why does the whole page refresh when I use jQuery to increase or decrease the font size?

Question

I have a HTML page where I want one button to increase the font size and the same button to decrease the font size when clicked.

I am using jQuery like so:

$("p").css("font-size","20")

However, when I do that the font size increases for maybe 2 seconds and then goes back to normal. It appears that the page is refreshing after I click the button... Why is that?

Answer 1

First of all you'll need a unit on the font-size value.

Second, could anything else trigger the reload (given it's not just the lack of units)?

Answer 2

put return false at the end of the callback to prevent the link (button) from refreshing.

$('#fontBtn').click(function () {
    $("p").css("font-size","20px")
    return false;
});

Answer 3

You have to return false [prevent the default action] so that the page won't be posted back.

Also my suggestion would be to use two different css classes for this and toggle those classes using

toggleClass( class )