title: How to get the height of image inside Bootstrap modal dialog (JS)
body: <p>This is sorta driving me insane, I have this modal that is scrolling past the window view, but I need to know the height of its content.</p>
  
  <p>Now, my JS gives that their height is 0, so naturally I went and console.log the node object to inspect what's wrong.</p>
  
  <p>And then... in the browser console, it gives the actual height it should be, but... not if I console.log directly the height attribute.</p>
  
  <p>So, how can I get the actual height of a div and what is going on here?</p>
  
  <p>Code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.modal').modal('toggle');
  
  for (let i = 0; i &lt; 6; i++) {
    $('.modal-body').append(`
     &lt;img src="https://i.imgur.com/FcOwQDX.gif"&gt;
    `)
  }
  
  for (const img of $('.modal-body').children()) {
    console.log(img, img.offsetHeight);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>