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

这个问题已经在这里有了答案:




已关闭8年。






我有一个CSS类<div>的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

最佳答案

尝试将代码放入窗口加载处理程序中，并且由于您的元素具有15px padding属性，因此您应该使用outerHeight方法:

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

请注意outerHeight接受一个 bool 值，false表示排除空白，true表示增加空白，还请注意，outerHeight返回具有该类名称的第一个匹配元素的高度。