使用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>