Question

I want to have two buttons, one a decrease button and the other an increase button, that respectively decrease and increase the font-size of the whole page.

Say some p tags are set to 16px font, h1 tags set to 30px, li tags to 14px, etc.

How do I, using jQuery, code the click function to increase their font-sizes. I’m also interested in making them only able to do it, say 5 times in either direction, to avoid absurd font-sizes.

I have something like this as is:

    $('button.decrease').click(function() {
        var fontSize = $('p').css('font-size');

        if (fontSize == "14px") {
            $('p').css({
                'font-size': '12px'
            });
        }
        else if (fontSize == "16px") {
            $('p').css({
                'font-size': '14px'
            });
        }
        else if (fontSize == "18px") {
            $('p').css({
                'font-size': '16px'
            });
        }
        else if (fontSize == "20px") {
            $('p').css({
                'font-size': '18px'
            });
        }
        else if (fontSize == "22px") {
            $('p').css({
                'font-size': '20px'
            });
        } 
    });

    $('button.increase').click(function() {
        var fontSize = $('p').css('font-size');

        if (fontSize == "12px") {
            $('p').css({
                'font-size': '14px'
            });
        }
        else if (fontSize == "14px") {
            $('p').css({
                'font-size': '16px'
            });
        }
        else if (fontSize == "16px") {
            $('p').css({
                'font-size': '18px'
            });
        }
        else if (fontSize == "18px") {
            $('p').css({
                'font-size': '20px'
            });
        }
        else if (fontSize == "20px") {
            $('p').css({
                'font-size': '22px'
            });
        }
    });

But it only works for increasing the size of the p tags, and I want it to be globally across the page.

Answer 1

You can pass a function to the css method.

$('#decrease').click(function() {
    $('p, h1, li').css('font-size', function(i, v) {
        return  +v.match(/\d+/).join() - 2
    })
})

$('#increase').click(function() {
    $('p, h1, li').css('font-size', function(i, v) {
        return  +v.match(/\d+/).join() + 2 
    })
})

http://jsfiddle.net/s3TJr/

You can use universal selector * for selecting all the elements, but that’s overkill.