Get an element's offsetHeight

Question

I have a vue.js component, which has large html template with images and different blocks.

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

How can I get an image block's offsetHeight?

Answer 1

Is it clearer for you:

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

I found a solution, which works for me, but it works only when I'm resized a page:

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