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.