The output clientHeight in js is different from the value output in the browser console?

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>
Html javascript
Apr.21,2022

problems with pictures
pictures are loaded asynchronously 

function listenImg(url, callback){
  let img = new Image()
  mg.src = url
  img.onload = callback
}

let url = "https://wx2.sinaimg.cn/large/6ad11a59ly1fz4x1zu7d5j212e0u0npf.jpg"
listenImg(url,function(){
    document.getElementById('wrap').children[0].clientHeight
})

you can simply write an example and you will find that div is high, because img is an inline block ( inline-block ), so setting div to fontsize:0 has no default height

. 
<div>
    <img src="" alt="">
</div>

the problem of asynchronous image loading is that when you get the wrap height, the picture is not yet loaded, so the height is 32. This 32px is the interval between the original height of the img tag and the img tag.
to get the height of a picture, it should be handled in the onload event: 


                            <img src=${url} />
                           </div>`
                
    document.querySelector('-sharpwrap').innerHTML = el
    var img = new Image()
    img.src = url
    img.onload = function () {
        console.log(document.getElementById('wrap').children[0].clientHeight)
    }

Previous: Is there any difference between perspective (0.5em) and perspective: 0.5em?

Next: What if the queryParams of v1.13.1 does not take effect?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eac424-20bd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eac424-20bd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?