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 回答