js offsetHeightで画像を含むdivの高さを取得

Question

私は見出しと画像を含むdivの高さを取得しようとしています。私が戻ってくるのは、見出しの高さだけです。特定の高さをコンテナdivに追加すると、正しい高さ（この場合300px）が得られますが、別の高さが必要です。任意のヘルプThx！

私の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; 
 
    alert(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>

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>