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

Question

我正在尝试获取包含标题和图像的div的高度。 我得到的只是标题的高度。 如果将特定高度添加到容器div中，则可以得到正确的高度（在这种情况下为300px），但是我需要不同的高度。 感谢您的帮助！

我的js代码：

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

我的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

确保在页面加载后运行它。

堆栈片段

 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> 

或者在body底部带有脚本标签

堆栈片段

 <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

使用jQuery load功能

 $( 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>