使用 jQuery 获取 html 元素呈现的高度答案

【问题标题】：Get html element rendered height with jQuery使用 jQuery 获取 html 元素呈现的高度
【发布时间】：2011-10-10 11:00:14
【问题描述】：

一个非常简单的问题。

例如，我有一个这样的类：

.someclass {
  font-size: 1.2em /* let's say that 1em is set to 10px in this example */
  padding: 1em 0 2em 0;
  border: 0.1em solid #000;
}

还有一些简单的html来使用它：

<div class="someclass">Test</div>

我想得到这个元素的生成高度 - 计算出的带有边框和填充的高度。在这个例子中使用 jQuery .height() 方法给出了 line-height 属性的当前值 - 正如预期的那样，因为 div 中的文本只有一行。

我知道我可以自己进行计算，因为它们相对简单，但我想问一下 - jQuery 中有没有内置的解决方案？

【问题讨论】：

标签： jquery css

【解决方案1】：

jQuery 有几种方法可以做到这一点。见http://api.jquery.com/category/dimensions/

在这种情况下，听起来你想要outerHeight()。 http://api.jquery.com/outerHeight/

【讨论】：

【解决方案2】：

去innerHeight

此方法返回元素的高度，包括顶部和底部填充，以像素为单位。

【讨论】：

【解决方案3】：

使用.outerHeight()。

获取集合中第一个元素的当前计算高度匹配的元素，包括内边距、边框和可选的边距。

【讨论】：

【解决方案4】：

你要找的是.outerHeight() - jQuery API

【讨论】：