Question

可能重复：
why jquery .height() get a different result on chrome?

我有<div>个CSS类myclass。 CSS类如下：

.myclass {
    position: absolute;
    width: 192px;
    font-size: 11px;
    background-color: #FFF;
    padding: 15px 15px 0;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);    
    display: block;
}

它没有指定高度。内容由PHP动态加载。在jQuery的$(document).ready(function() { });中，我通过以下方式调试div的高度：

console.log($('div.myclass').height()); // the result = 330

HTML：

<div class="myclass">
<img src="image.png" />
<p>Text here text here</p>
</div>

但是，如果我在Google Chrome中使用Inspect Element功能，则会显示 531px 。为什么会有区别？如何获得531px值？

更新：$(this).outerHeight(); // 345px, as there is 15px margin

Answer 1

尝试将代码放在窗口加载处理程序中，同样，当您的元素具有15px填充属性时，您应该使用outerHeight方法：

$(window).load(function(){
    console.log($('div.myclass').outerHeight()); 
});

请注意outerHeight接受一个布尔值，false表示排除边距，true表示添加边距，另请注意outerHeight返回第一个匹配元素的高度与该类名。

Answer 2

console.log($('div.myclass').outerHeight());

outherHeight还会考虑填充和边距。

编辑：如果您不需要保证金，请改用innerHeight()。

Answer 3

实际上是准确的。

height()函数告诉你块元素的高度，没有填充和边距
innerHeight()函数告诉你块元素的高度，填充但没有边距
outerHeight()函数告诉您带有填充和边距的块元素的高度

jQuery：$（'div.myclass'）。height（）不准确

3 个答案: