javascript - 如何更改 div 中的所有字体大小？

Question

首先我为我的英语道歉。如果编辑们改正了我的错误，我会很高兴。

这是我的 div 和内容。

<div data-x="182" data-y="201" class="resize-drag" contenteditable="true" id="text-giris2"  style="width: 115px; height: 153px; transform: translate(182px, 201px); position: absolute; text-align: left; overflow: hidden; border: 1px solid black;">
    <u style="font-size: 15px;">asd</u>
    as a<b>sd</b>
    <span>a<span style="color: red; font-size: 18px;">s a</span>sdas a
    <span><span style="font-size: 18px;">sdasd 
    <span style="font-size: 26px;">addddddd</span></span></span></span>
    </div>

我想动态更改具有唯一名称“text-input2”的 div 元素中所有字体大小的大小。但其中会发生什么还不清楚。如上所述，像 <span> 这样的标签, <u> , <b>可以相似。我想把我想做的所有字体的大小都放大 2 倍。例如，我想要 <span style = "font-size: 18px>在<span style =" font-size: 36px>之后同样，<u style = "font-size: 15px;">在<u style = "font-size: 30px;">之后仅使用 CSS 可以完成这样的事情吗？如果不可能，我会尝试使用 Javascript，但我不知道从哪里开始。我在等你的帮助。谢谢。

Answer 1

我在下面提供的代码将遍历包含在 ID 为 text-giris2 的 div 中的所有元素。在每次迭代中，它将采用当前字体大小并将其加倍。

$('#text-giris2').children().css('font-size', function(i, current){
    return parseFloat(current) * 2;
});

一个例子

$('#container').children().css('font-size', function(i, current){
    console.log('New font size for ' + $(this).text() + ' is ' + parseFloat(current) * 2);
    return parseFloat(current) * 2;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <span style="font-size: 5px;">Hello</span>
    <p style="font-size: 7px;">World</p>
    <span>Foobar</span>
</div>