获取元素的offsetHeight

Question

我有一个vue.js组件，该组件具有带有图像和不同块的大型html模板。

<div>
   ...
</div>
...
<div class="image-block">
   <img src="..." alt="" width="..." height="...">
</div>
...

如何获得图像块的offsetHeight？

Answer 1

您是否更清楚：

mounted() { 

  let imageBlock = document.getElementsByClassName('information-block__img'); 
  // => A DOMElement set

  // If you want a jQuery set :

  let imageBlockJQ = $('.information-block__img') ;

  for (let element in imageBlock) { 

    let image = imageBlock[element]; 
    // So a DOMElement

    let imageHeight = image.offset();  // => FAIL

    // A DOMElement does'nt know the `offset` method. A jQuery set does
    // so:
    let imageHeight = $(image).offset();

    // Or

    let imageHeight = image.offsetTop ; // => RIGHT, a property

}

Answer 2

只需使用element.offset()调用即可。

Answer 3

我找到了一个对我有用的解决方案，但仅在调整页面大小时才有效：

mounted() {
      let infoBlock = document.getElementsByClassName('information-block');
      for (let element in infoBlock) {
          $(window).resize(function() {
              $('.information-block__container').height($('.information-block__img').height());
          });
      }
}