[英]set font-size of element to be multiple of a font-size of another element using JavaScript
Is it possible to set the font-size of an element to be a multiple of another element's font-size using JavaScript or CSS? 是否可以使用JavaScript或CSS将元素的字体大小设置为另一个元素的font-size的倍数?
For example, if I have 例如,如果我有
.root {
font-size: 10pt;
}
And I want to make the font-size another element to be multiple of this, so that it can be something like 而且我想让font-size成为另一个元素的倍数,这样就可以了
.leaf {
font-size: font-size-of-.root * 2.5;
}
I have tried this: 我试过这个:
$(document).ready(function() {
//var leaf = document.getElementsByClassName("leaf")[0];
$('.leaf').css({
"font-size": function() {
return $(".root").css('font-size') * 2.5;
}
});
});
But it is not setting the font-size accordingly. 但它没有相应地设置字体大小。
Get the element's font-size using css()
method and multiply it with the factor you want: 使用
css()
方法获取元素的font-size,并将其与您想要的因子相乘:
$('.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>
You can also make .leaf
a child of .root
element - 您也可以
.leaf
的孩子.root
元素-
<p class="root">
Big
<span class="leaf">Small</span>
</p>
And then use following css - 然后使用以下css -
.root{
font-size: 32px;
}
.leaf{
font-size: 50%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.