使用js offsetHeight获取包含图像的div的高度

Question

I'm trying to get the height of a div containing a headline and an image. All I get back is the height of the heading. If I add a specific height to the container div I get the correct height (in this case 300px), but I need the different heights. Thx for any help!

My js code:

var tile1 = document.getElementById('t1').offsetHeight;

My HTML:

<div class="t" id="t1" style="height:300px !important;">
   <article>
      <header class="beitrag">
         <div class="beitrag-meta">Date: 2016-11-02 19:59:45</div>
      </header>
      <div class="beitrag-inhalt"><img src="219594520163877.jpg" ></div>
  </article>
</div>

Answer 1

Make sure you run it after the page has been loaded.

Stack snippet

 window.addEventListener('load', function() { var tile1 = document.getElementById('t1').offsetHeight; console.log(tile1); }) 

 <div class="t" id="t1"> <article> <header class="beitrag"> <div class="beitrag-meta">Date: 2016-11-02 19:59:45</div> </header> <div class="beitrag-inhalt"><img src="http://placehold.it/100/"></div> </article> </div> 

Or with a script tag at the bottom of the body

Stack snippet

 <div class="t" id="t1"> <article> <header class="beitrag"> <div class="beitrag-meta">Date: 2016-11-02 19:59:45</div> </header> <div class="beitrag-inhalt"><img src="http://placehold.it/100/"></div> </article> </div> <script> var tile1 = document.getElementById('t1').offsetHeight; console.log(tile1); </script> 

Answer 2

use jQuery load function

 $( document ).ready(function() { $("img").load(function() { var tile1 = document.getElementById('t1').clientHeight; alert("height: "+tile1); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="t" id="t1"> <article> <header class="beitrag"> <div class="beitrag-meta">Date: 2016-11-02 19:59:45</div> </header> <div class="beitrag-inhalt"><img src="http://placehold.it/300x350" ></div> </article> </div>