获取不到的元素属性

获取不到的元素属性

代码是这样子的：

<div id="dd"></div>
复制代码

#dd{
    width: 50px;
    height: 50px;
    background-color: rgb(238, 238, 238);
    border-radius: 50%;
    border: 5px solid rgb(170, 170, 170);
}
复制代码

console.log(elc.offsetHeight); // 0
复制代码

有没有觉得这里很奇怪？我们的DOM元素高度是60px，按正常这里应该是输出 60，但是这里输出的是0？？

其实，这是因为JS代码执行的问题，在console.log(elc.offsetHeight);执行的时候，这时候DOM元素还没被完整的渲染完毕，所以会拿到0

接下来，我们把改改代码

window.onload=()=>{
        console.log(elc.offsetHeight); // 60
    }
复制代码

这次，我们拿到的元素高度是正确的，值为60

如果你的JS文件是额外的，需要通过script:src引入方式，那么你可以使用<script defer>

defer 这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。