1

表示されている div にドキュメントがあり、ユーザーがその中にあるもののフォント サイズを調整できるようにしたいと考えています。次のようなある種のコード：

$("#fontPlusBtn").click(function (){
    $("#textDiv").css("font-size", "*=1.1");
}):

この div ですべてのテキスト ノード (サイズが異なる) のサイズを比例的に変更するにはどうすればよいですか?

更新：（作業バージョン）

ここでいくつかの回答を組み合わせて、以前に持っていたものを変更したので、後でこの問題に出くわした他の人のために、私がしたことは次のとおりです。

var upFontSize = function($obj) {
    $obj.children().each(function(index){
        if($(this).children().length > 0){
            upFontSize($(this));
        }else {
            $(this).css({
                "font-size": function(index, value) {
                    return parseFloat(value) * 1.1;
                },
            });
        }
    });
}
4

3 に答える 3

2

これはあなたの質問への回答であり、複数のテキストサイズを説明し、それに応じてサイズを変更します:

...そして、ここに実際の例があります:

http://jsfiddle.net/Xr2gj/44/

js:

$(document).ready(function (){
    $("#fontPlusBtn").click(function (){
        $(".textDiv, .textDiv > *").each( function(index){
            $(this).css( {
                "font-size": function(index, value) {
                    return parseFloat(value) * 1.1;
              }
            });
        });
    });
});

CSS:

#world{
    font-size: 8pt;
}

#solarSystem{
    font-size: 12pt;
}
#galaxy{
    font-size: 14pt;
}

#universe{
    font-size: 16pt;
}

html:

<a id="fontPlusBtn" href="#">
    Click to increase font-size
</a>

<div class="textDiv" id="world">
    Hello World!
</div>

<div class="textDiv" id="solarSystem">
    <p><b>Hello Solar System!</b></p>
</div>

<div class="textDiv" id="galaxy">
    <p>Hello Galaxy!</p>
</div>

<div class="textDiv" id="universe">
    <p><div><b><a href="#">Hello Universe!</a></b></div></p>
</div>

他のいくつかの回答と組み合わせることができるかもしれませんが、このhttp://jsfiddle.net/Xr2gj/44/は、指定したとおりに機能することを示しています。

于 2012-07-24T20:40:16.277 に答える
1

"As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px."
参照

そのためには、実際の値を返す関数コールバックを使用してから、新しい値を返します。
以下のように。

  $("#fontPlusBtn").click(function (){
        $("#textDiv > *").css("font-size", function(i, value) {
            return parseInt(value) * 1.1;
        });
    });

デモ

于 2012-07-24T20:01:34.473 に答える
0

ここに例があります - jsFiddle

コードは次のとおりです。

$("#fontPlusBtn").click(function (){
    var getNr = parseInt($("#textDiv").css("font-size")) * 1.1;
    $(".textDiv").css("font-size", getNr+"px");
});​

問題は、css に除算または乗算の条件がなく+=px、 orしかないこと-=pxです。したがって、実際の要素から解析された整数を取得し、font-sizeそれを乗算してから適用するだけです。

于 2012-07-24T19:55:19.843 に答える