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

Question

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.

Now, my JS gives that their height is 0, so naturally I went and console.log the node object to inspect what's wrong.

And then... in the browser console, it gives the actual height it should be, but... not if I console.log directly the height attribute.

So, how can I get the actual height of a div and what is going on here?

Code:

 $('.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

The onload event

You should check the offsetHeight of the image, when the onLoad event is triggered.

Example :

 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

However, you are using a Bootstrap modal dialog , wich adjusts automatically its size according to the contents, using an animation. In consequence, until the modal dialog finishes the animation, you will not be able to get the real image Height.

You should wait for the shown.bs.modal event .

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).

Usage :

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