在没有 CSS 高度规则的情况下确定元素的高度

在元素没有 CSS 高度规则的情况下，获取元素的高度可能会很困难它的高度。 jQuery .height() 方法需要预定义的 CSS 高度值，在这种情况下似乎不够。但是，还有其他方法可以确定元素的高度。

jQuery .height()

与普遍看法相反，jQuery .height() 不依赖关于 CSS 高度定义。它计算元素的计算高度，使其适合没有明确指定 CSS 高度的场景。

DEMO

.height()：检索元素的高度没有 padding、border 或 margin。

.innerHeight()：检索元素的高度，包括 padding，但不包括 border 和 margin。

.outerHeight()：检索元素的高度，包括 border，但不包括margin.

.outerHeight(true): 检索元素的高度，包括边框和边距。

现场演示的代码片段

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('
Height (.height() returns) : '   $heightTest.height()   ' [Just Height]
')
    .append('
Inner Height (.innerHeight() returns): '   $heightTest.innerHeight()   ' [Height   Padding (without border)]
')
    .append('
Outer Height (.outerHeight() returns): '   $heightTest.outerHeight()   ' [Height   Padding   Border]
')
    .append('
Outer Height (.outerHeight(true) returns): '   $heightTest.outerHeight(true)   ' [Height   Padding   Border   Margin]
')
});