jQuery:$('div.myclass').height()不准确

Question

可能重复:
为什么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

Answer 1

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

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

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