1

ページ全体のフォントサイズをそれぞれ増減する2つのボタン（1つは減少ボタンともう1つは増加ボタン）が必要です。

一部の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タグのサイズを大きくする場合にのみ機能するため、ページ全体でグローバルに表示する必要があります。

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でフォントサイズを変更し、親要素のフォントサイズを変更するだけでなく、たとえばbodyのように変更することもできます。

<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 に答える