creates the element and gives the width, but not the height.
the following code will output 32 when running in Google browser, and
but manually entering
document.getElementById ("wrap") in the Google browser console. Children [0] .clientHeight
will output 338
, that is, the correct height of the element
is it because the element wasn"t loaded when I got the height? Isn"t it supposed to output 0 if it"s not loaded? Why 32?
how should I get the correct height?
<body>
<style type="text/css">
-sharpwrap {
position: relative;
}
.pic-flow {
position: absolute;
width: calc((100% - 30px) / 4);
}
.pic-flow img {
width: 100%;
}
</style>
<div class="wrap" id="wrap">
</div>
<script type="text/javascript">
let url = "https://wx2.sinaimg.cn/large/6ad11a59ly1fz4x1zu7d5j212e0u0npf.jpg"
let el = `<div class="pic-flow">
<img src=${url}></imgs>
</div>`
document.querySelector("-sharpwrap").innerHTML = el
console.log(document.getElementById("wrap").children[0].clientHeight)
</script>
</body>