Question

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

例如，如果我有

.root {
   font-size: 10pt;
}

我想让font-size成为另一个元素的倍数，这样就可以像

一样

.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;
            }
        });
    });

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

Answer 1

使用css()方法获取元素的字体大小，并将其乘以您想要的因子：

$('.big').css('font-size', parseInt($('.small').css('font-size')) * 2.5 + 'px');

.small { font-size:10px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="small">Small font</span>
<span class="big">Big font</span>

Answer 2

您还可以让[Spring - Full Semester, Fall - Full Semester, Summer - Summer Semester]成为.leaf元素的孩子 -

.root

然后使用以下css -

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

使用JavaScript将element的font-size设置为另一个元素的font-size的倍数

2 个答案: