获取某个元素的宽度问题

Question

在进入页面的时候我需要获取某个id为main的div的宽度
这是我获取宽度的代码

    let box = document.getElementById('main');
    alert(box.clientWidth);
    this.setState({
        width: box.clientWidth,
    });

如果第一次就进入这个页面，获取的宽度为

再进入其它页面再回来，获取的宽度为

请问这是什么问题呢

Answer 1

clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

clientWidth是过去可是区域宽度，如果你要获取box元素的宽度用offsetWidth

Code: box.offsetWidth

Answer 2

可能第一次是因为页面没加载完就执行了clientWidth，从其他页面进来是加载了缓存。
可以等整个文档加载完了再获取dom元素的clientWidth。
window.onload=()=>alert(box.clientWidth);

Answer 3

好像是 react 更新后出现在 componentDidMount 生命周期会出现的问题，你可以在你获取宽度前 debugger 一下，看看元素的具体大小。

我这边出现的情况是：当第一次进入页面的时候，样式信息还没有生成（样式还没有通过js插入到文档中）导致元素和预期的不一样，而第二次由于样式已经导入，就没问题了。