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

Question

这有点让我疯狂，我有这个模式滚动浏览窗口视图，但我需要知道其内容的高度。

现在，我的JS给出了它们的高度为0，所以我自然而然地在console.log节点对象中检查了什么是错误的。

然后......在浏览器控制台中，它给出了它应该的实际高度，但是......如果我直接控制了.log，请调整高度属性。

那么，我怎样才能得到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事件

当触发onLoad事件时，您应该检查图像的offsetHeight 。

示例：

 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> 

Bootstrap modal dialog

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

您应该等待shown.bs.modal 事件 。

当模态对用户可见时将触发此事件（将等待CSS过渡完成）。

用法：

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