如何在Bootstrap模态对话框（JS）中获取图像的高度

Question

这有点使我发疯，我有这个模态正在滚动通过窗口视图，但是我需要知道其内容的高度。

现在，我的JS给出了它们的高度为0的信息，所以我自然地去了console.log节点对象以检查出什么问题。

然后...在浏览器控制台中，它给出了应该的实际高度，但是...如果我直接用console.log记录height属性，则不会。

那么，如何获得div的实际高度以及这里发生了什么？

代码：

$('.modal').modal('toggle');

for (let i = 0; i < 6; i++) {
  $('.modal-body').append(`
  	<img src="https://i.imgur.com/FcOwQDX.gif">
  `)
}

for (const img of $('.modal-body').children()) {
  console.log(img, img.offsetHeight);
}

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">

      </div>
    </div>
  </div>
</div>

Answer 1

onload事件

在触发offsetHeight事件时，应检查图像的onLoad。

示例：

let img = $('<img src="https://i.imgur.com/FcOwQDX.gif">');
img.on('load', function(){
  alert( 'offsetHeight : ' +  this.offsetHeight+ 'px' )
});
$('.container').append(img)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> </div>

引导modal dialog

但是，您正在使用 Bootstrap modal dialog，它会根据内容使用动画自动调整其大小。 因此，在modal dialog完成动画之前，您将无法获得真实的图像高度。

您应该等待shown.bs.modal event。

  

当模式对用户可见时将触发此事件（将等待CSS转换完成）​​。

用法：

$('.modal').on('shown.bs.modal', function (e) {
    console.log('modal box resizing complete. Content sizes ready to be checked!')
})