Javascript 使用多种字体大小调整div中文本的大小？

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

以下是示例-

以下是代码：

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

问题是，css中没有任何除法或乘法条件，只有

+=px

或

-=px

。因此，您只需从实际元素

font size

中获取解析后的整数，然后将其相乘，然后应用它。

“从jQuery 1.6开始，.css（）接受类似于.animate（）的相对值。相对值是以+=或-=开头的字符串，用于递增或递减当前值。例如，如果元素的左填充为10px，.css（“左填充”，“+=15”）将导致总左填充为25px。“

因此，您可以使用函数回调来返回实际值，然后返回新值。
像下面这样

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

---

这是对您的问题的回答，说明了多个文本大小，并相应调整大小：

…下面是一个工作示例：

js:

css:

html:

你好，世界！
你好，太阳系

你好，银河

---

​您可能可以与其他一些答案混合使用，但这表明它可以按照您指定的方式工作。

它们必须包装在另一个元素中才能具有不同的字体大小。它们是用什么包装的？#textDiv基本上可以保存任何HTML页面，比如webview。因此，它拥有普通HTML文档的所有包装，在本例中，我无法编辑这些包装。这对div非常有用，但它不会改变任何东西，因为DOM树下的元素（div中的文本节点）具有不同的文本大小。我想这是因为CSS首先应用了最本地的字体大小声明，我如何才能避免这个问题？@Theeggman 85检查我的更新答案，如果它不能解决你的问题，用你的代码更新你的问题。嗯，没有骰子。我认为这是因为我在这个div中有更多的div（#textDiv基本上像一个html阅读器），而更新的代码似乎只寻找直接的子对象。这就是为什么？我需要手动递归DOM吗？如果您使用“.textDiv”类而不是检查JSFIDLE链接的ID，那么这会像您预期的那样工作。我遇到的问题与Ricardo解决方案注释中提到的问题相同。你知道什么是可以修复的吗？我更新了jQuery选择器。这应该对你有用。如果不只是让我知道更多的细节，嗯，仍然不起作用，我想这是因为我在#textDiv中的所有嵌套div都有进一步指定的字体大小。这是递归深度的问题吗？我的部分答案是textDiv不能是类的id：所以不是#textDiv（id=“textDiv”），而是.textDiv（class=“textDiv”），只要你这样做，它就应该工作。就像在小提琴中一样。递归深度应该没有问题

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

#world{
    font-size: 8pt;
}

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

#universe{
    font-size: 16pt;
}

<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>