1

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

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

我如何使用 jQuery 对 click 函数进行编码以增加其字体大小。我也有兴趣让他们只能做到这一点，比如在任一方向上说 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标签的大小，我希望它在整个页面上都是全局的。

4

4 回答 4

4

您可以将函数传递给该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/

您可以使用通用选择器*来选择所有元素，但这太过分了。

于 2012-11-13T00:28:37.243 回答
1

这是一个简单的例子：

$(document).ready(function() {

    $('#inc').click(function() {

        $('*').each(function() {
            $(this).css('font-size', parseInt($(this).css('font-size').replace(/px$/,'')) + 2 + "px");
        });
    }) ;

    $('#dec').click(function() {

        $('*').each(function() {
            $(this).css('font-size', parseInt($(this).css('font-size').replace(/px$/,'')) - 2 + "px");
        });
    }) ;
});

这里的工作示例：http: //jsfiddle.net/YT8K4/1/

于 2012-11-13T00:36:34.783 回答
0

您可以在 em 中设置字体大小，而不仅仅是更改父元素的字体大小，例如正文，例如

<div class="small">
<div style="font-size: 1em;">
    Text 1
</div>

<div style="font-size: 1.5em;">
    Text 1.5
</div>

<div style="font-size: 0.5em;">
    Text 0.5
</div>
</div>

和你的CSS：

.small {font-size: 0.85em;}
.big {font-size: 1.25em;}

一旦您更改父元素的 css 类，这将更改子元素的文本大小，如下所示：jsFiddle

于 2012-11-13T00:57:09.833 回答
0

CSS和JS的结合怎么样？默认情况下，在标签上加载类别为“100”的页面。那么 JS 可以是：

<html data-zoom=100>

----

[data-zoom="80"] h1,
[data-zoom="80"] p {
    font-size: 80%;
}

[data-zoom="120"] h1,
[data-zoom="120"] p {
    font-size: 120%;
}

----

<a href="#" class="-">-</a>
<a href="#" class="+">+</a>

----

var upDown = function () {
    var zoom = 100, zoomBy = 20;
    return function (e) {
        zoom = e.currentTarget.className === '-'? zoom - zoomBy : zoom + zoomBy;
        document.documentElement.dataset.zoom =  zoom;
    }
}();

$('.-, .\\+').on('click', upDown);

查看http://jsbin.com/ehoyep/2/以获取示例。

于 2012-11-13T01:29:30.803 回答