获取某个元素的宽度问题

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

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

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

clipboard.png
再进入其它页面再回来,获取的宽度为

clipboard.png
请问这是什么问题呢

阅读 5.1k
3 个回答

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

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

Code: box.offsetWidth

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题