获取div的高度，在css中没有设置高度 [英] Get height of div with no height set in css

问题描述

有没有办法获得元素的高度，如果没有CSS高度规则集的元素我不能使用.height（）jQuery方法，因为它需要一个CSS规则集首先？有没有其他方法来获得高度？

Is there any way to get the height of an element if there is no CSS height rule set for the element I cannot use .height() jQuery method because it need a CSS rule set first? Is there any other way to get the height?

推荐答案

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

jQuery .height will return you the height of the element. It doesn't need CSS definition as it determines the computed height.

DEMO

您可以使用 .height（）， .innerHeight（）或 outerHeight（）。

>

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

.height() - returns the height of element excludes padding, border and margin.

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

.innerHeight() - returns the height of element includes padding but excludes border and margin.

。 outerHeight（） - 返回包含边框的div的高度，但不包括margin。

.outerHeight() - returns the height of the div including border but excludes margin.

.outerHeight / code> - 返回包含边距的div的高度。

.outerHeight(true) - returns the height of the div including margin.

请检查以下代码段以进行现场演示。 ：）

Check below code snippet for live demo. :)

$(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>

这篇关于获取div的高度，在css中没有设置高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！