Question

我有一个具有特定字体大小和行高的div。计算箱子高度（包括填充）的正确数学公式是什么？

<div style="padding: 15px; background-color: #ccc; font-size: 18px; line-height: 1.4em;">
               text
</div>

Answer 1

只需使用.offsetHeight例如

var height = document.getElementById(id_attribute_value).offsetHeight;

有关详细信息，请参阅HTMLElement.offsetHeight docs

HTMLElement.offsetHeight只读属性是。的高度元素包括垂直填充和边框，以像素为单位整数。

如果您希望排除元素边框，.innerHeight就足够了。此外，.getBoundingClientRect()将返回小数值（如果需要）

注意：对于jQuery解决方案，请查看.height()，.outerHeight()和.innerHeight()

JSFiddle Link - 演示

Answer 2

我认为你想把它作为一种心理锻炼而不是用于生产。为此，您需要计算行数（示例为on JSFiddle）

font-size:       18px
line-height:     1.4em = 25.2px => rounded to 25px
number of lines: 7

height (no padding)   = 25 * 7 = 175px
height (with padding) = 175 + 15 * 2 = 205

手动计算CSS框高度

2 个答案: