调整具有多种字体大小的div中的文本大小?

时间:2012-07-24 19:46:48

标签: javascript jquery html css

我在显示的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;
                },
            });
        }
    });
}

3 个答案:

答案 0 :(得分: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/显示它与您指定的一样有效。

答案 1 :(得分: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."
reference

为此,您可以使用函数回调来返回实际值,然后返回新值 如下所示。

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

demo

答案 2 :(得分:0)

以下是示例 - jsFiddle

这是代码:

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

问题是,css中没有任何除法或乘法条件,只有+=px-=px。所以你要做的只是从实际元素font-size中获取解析后的整数,然后将其相乘,然后应用它。