why isn't clientHeight 150px?

Question

let height = document.getElementById('d').clientHeight
console.log(height);

img{
height:100%;}

<div id = 'd'>
<img src="https://via.placeholder.com/100x150">
</div>

There are dozens of additional duplicates you may review: https://www.google.com/search?q=javascript+image+height+is+zero+-jquery+site%3Astackoverflow.com — user229044, Jun 03 '22 at 18:13
If there are dozens of additional duplicates why did you write an answer instead of voting to close? — Andy, Jun 03 '22 at 18:18

score 4 · Answer 1 · answered Jun 03 '22 at 18:05

4

The image hasn't loaded when you are console logging. You can create an event listener that waits for the image to be loaded and then it will show the proper height.

function loaded() {
    let height = document.getElementById('d').clientHeight;
    console.log(height);
}

const img = document.getElementById('img');
if (img.complete) {
  loaded()
} else {
  img.addEventListener('load', loaded)
}

img{
height:100%;}

<div id = 'd'>
<img id='img' src="https://via.placeholder.com/100x150">
</div>

answered Jun 03 '22 at 18:05

Jordan Soltman

3,795
17
31

1

It's worth pointing out that this results in `154` (153.75 rounded up). To fix this you [can set `img { display: block; }`](https://stackoverflow.com/questions/19212352/div-height-based-on-child-image-height-adds-few-extra-pixels-at-the-bottom), and that will result in the correct height of 150. – Andy Jun 03 '22 at 18:19

user229044 · Accepted Answer · 2022-06-03T18:04:15.180

-2

Because the image hasn't loaded when your code is executing:

setTimeout(() => {
    let height = document.getElementById('d').clientHeight
    console.log(height);
}, 1000)

<div id = 'd'>
<img src="https://via.placeholder.com/100x150">
</div>

If your code depends on knowing the height of the image in order to run correctly, you need to check whether the image is loaded, and wait until it has if it hasn't yet.

edited Jun 03 '22 at 18:04

answered Jun 03 '22 at 18:01

user229044

232,980
40
330
338

4

Don't use a timeout for this, use a load listener. Otherwise you're going to get racing issues. – zero298 Jun 03 '22 at 18:02
@zero298 There are lots of ways of solving this. I'm trying to demonstrate the error, not prescribe a solution. – user229044 Jun 03 '22 at 18:06
3

Please don't think I'm trying to call you out. If someone on a dial-up runs this answer and wonders why it's not working, the issue is still that the image hasn't loaded yet. For 90% of users, this will "work", it's just not really a complete solution. – zero298 Jun 03 '22 at 18:09
Again, it is not intended to be *any* solution, certainly not a complete one. It's intended to demonstrate the problem. – user229044 Jun 03 '22 at 18:09

score -3 · Answer 3 · answered Jun 03 '22 at 18:10

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

addEventListener('load',(event)=>{
    let height = document.getElementById('d').clientHeight
    console.log(height);
});

why isn't clientHeight 150px?

3 Answers3