0
241
Viewshow to get exact content height inside the div using javascript?
I am trying to get exact content height inside the div .I am able to get exact value when there is no image inside the container . but if there is an image inside it give wrong result why ?
I am using clientHeight and offsetHeight both gives wrong output.
here is my code https://codesandbox.io/s/cold-browser-dxj51?file=/index.html:907-919
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
padding: 20px;
width: 200px;
background-color: #eeeeee;
}
.logo img {
width: 100%;
}
.logo {
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="1.png" />
</div>
<div class="abc">
This is a static template, there is no bundler or bundling involved!
</div>
</div>
<script>
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
</script>
</body>
</html>
Expected output : 154px+ 20px+20px =(194px)
myoutput : 142px
·
Juan Pablo Isaza
1 answers
Answer question0
The problem is that your javascript is not waiting the image's full load before checking its height. You can use the event listener "load" to succesfully fire the script you want, once dependent resources have finished loading:
window.addEventListener("load", event => {
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
});
The code above will give you your desired output.
·
Juan Pablo Isaza
Report
Answer question