Element attributes that could not be obtained

The code looks like this:

<div id="dd"></div>
Copy the code
#dd{
    width: 50px;
    height: 50px;
    background-color: rgb(238.238.238);
    border-radius: 50%;
    border: 5px solid rgb(170.170.170);
}
Copy the code
console.log(elc.offsetHeight); / / 0
Copy the code

Do you think it’s weird in here? Our DOM element height is 60px, which would normally output 60, but 0 instead?

In fact, this is due to the JS code execution problem in console.log(elc.offsetheight); When executed, the DOM element is not fully rendered, so it gets 0

Next, let’s change the code

window.onload=() = >{
        console.log(elc.offsetHeight); / / 60
    }
Copy the code

This time, we get the element height right, 60

If your JS file is extra and needs to be imported via script: SRC, you can use

The Boolean attribute deferred is set to inform the browser that the script will execute after the document has been parsed and before the DOMContentLoaded event is triggered.