jquery - 获取没有在CSS中设置高度的div的高度

Question

如果没有为元素设置 CSS 高度规则，有什么方法可以获取元素的高度 我不能使用 .height() jQuery 方法，因为它首先需要一个 CSS 规则集？有没有其他方法可以获取高度？

Answer 1

jQuery .height 将返回元素的高度。它不需要 CSS 定义，因为它确定计算的高度。

DEMO

您可以根据需要使用.height()、.innerHeight() 或outerHeight()。

.height() - 返回元素的高度，不包括填充、边框和边距。

.innerHeight() - 返回元素的高度，包括填充但不包括边框和边距。

.outerHeight() - 返回包含边框但不包含边距的 div 的高度。

.outerHeight(true) - 返回 div 的高度，包括边距。

检查下面的代码片段以进行现场演示。 :)

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

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>