Question

所以我有一个元素：

<div class="obj">
  <img width="896" height="595" src... />
  <div class="details">
    <h2>Title</h2>
    <p>...</p>
  </div>
</div>
<div class="obj">
  <img width="896" height="595" src... />
  <div class="details">
    <h2>Title</h2>
    <p>...</p>
  </div>
</div>

然后我在他们身上执行此操作：

$objs = $('.obj');
$objs.each(function() {
    console.log($(this).height());
}

在Chrome中的元素检查器中，.obj的高度为720（与图像相同）。但是我在控制台中为每个元素得到0。

图像没有浮动，因此.obj在css中包含它的子项。我真的不知道会出现什么问题，以及为什么jQuery没有返回720。

可能与CSS有关吗？

Answer 1

可能与CSS有关。没有发布你的CSS，很难知道。（你说Chrome报告obj的高度是720，与图像相同，但图像的高度设置为595）？

此jsfiddle显示了它的工作原理。

Answer 2

处理window.onload事件以确保加载所有图像，例如

$(window).load(
  function() {
    $objs = $('.obj');
    $objs.each(function() {
        console.log($(this).height());
    }
  }
);

jQuery height（）与clientHeight不同

2 个答案: