使用JavaScript将元素的字体大小设置为另一个元素字体大小的倍数

是否可以使用JavaScript或CSS将一个元素的字体大小设置为另一个元素字体大小的倍数

例如，如果我有

.root {
   font-size: 10pt;
}

我想让字体大小的另一个元素是这个的倍数，所以它可以是这样的

.leaf {
   font-size: font-size-of-.root * 2.5;
}

我试过这个：

$(document).ready(function() {
        //var leaf = document.getElementsByClassName("leaf")[0];
        $('.leaf').css({
            "font-size": function() {
                return $(".root").css('font-size') * 2.5;
            }
        });
    });

---

但它并没有相应地设置字体大小

使用

css（）

方法获取元素的字体大小，并将其乘以所需的系数：

$（'.big'）.css（$（'.small'）.css（$（'.small'））*2.5+'px'）
.small{font size:10px}

小字体
大字体
您还可以将
.leaf
设置为
.root
元素的子元素-

<p class="root">
  Big
  <span class="leaf">Small</span>
</p>

您是否提醒了
$（“.root”）.css（'font-size'）
并选中了。。如果您已经这样做了，那么您必须知道实际的问题在哪里。问题是css（“字体大小”）返回lke“10px”，而不是预期的10。这就是它不起作用的原因。您可以将$（“.root”）.css（'font-size'）包装在parseInt（）中，然后获得正确的值。
.root{
  font-size: 32px;
}
.leaf{
  font-size: 50%;
}