6

可能重复：
为什么 jquery .height() 在 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>

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

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

4

3 回答 3

18

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

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

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

于 2012-12-07T11:35:51.000 回答
4 
console.log($('div.myclass').outerHeight());

outherHeight 还将考虑填充和边距。

编辑：如果您不需要边距，请innerHeight()改用。

于 2012-12-07T11:33:18.047 回答
3

实际上是准确的。

  • height()函数告诉你块元素的高度，没有填充和边距
  • innerHeight()函数告诉你块元素的高度，有填充但没有边距
  • outerHeight()函数告诉你带有填充和边距的块元素的高度
于 2012-12-07T11:35:40.140 回答