javascript - 实现增加和减小页面字体大小的按钮的最佳方法是什么(使用 jQuery)？

Question

我想要两个按钮，一个是减小按钮，另一个是增大按钮，分别减小和增大整个页面的字体大小。

比如一些p标签设置为16px字体，h1标签设置为30px，li标签设置为14px等

我如何使用 jQuery 编写点击功能代码以增加字体大小。我也有兴趣让他们只能这样做，比如在任一方向上 5 次，以避免荒谬的字体大小。

我有这样的东西:

    $('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'
            });
        }
    });

但它只适用于增加 p 标签的大小，我希望它在整个页面上都是全局的。

Answer 1

您可以将函数传递给 css 方法。

$('#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/

您可以使用通用选择器 * 来选择所有元素，但那矫枉过正。