在进入页面的时候我需要获取某个id为main的div的宽度
这是我获取宽度的代码
let box = document.getElementById('main');
alert(box.clientWidth);
this.setState({
width: box.clientWidth,
});
如果第一次就进入这个页面,获取的宽度为
再进入其它页面再回来,获取的宽度为
请问这是什么问题呢
在进入页面的时候我需要获取某个id为main的div的宽度
这是我获取宽度的代码
let box = document.getElementById('main');
alert(box.clientWidth);
this.setState({
width: box.clientWidth,
});
如果第一次就进入这个页面,获取的宽度为
再进入其它页面再回来,获取的宽度为
请问这是什么问题呢
可能第一次是因为页面没加载完就执行了clientWidth,从其他页面进来是加载了缓存。
可以等整个文档加载完了再获取dom元素的clientWidth。window.onload=()=>alert(box.clientWidth);
好像是 react 更新后出现在 componentDidMount 生命周期会出现的问题,你可以在你获取宽度前 debugger 一下,看看元素的具体大小。
我这边出现的情况是:当第一次进入页面的时候,样式信息还没有生成(样式还没有通过js插入到文档中)导致元素和预期的不一样,而第二次由于样式已经导入,就没问题了。
13 回答13.1k 阅读
7 回答2.2k 阅读
3 回答1.4k 阅读✓ 已解决
6 回答1.4k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
4 回答1.7k 阅读
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
clientWidth是过去可是区域宽度,如果你要获取box元素的宽度用offsetWidth
Code: box.offsetWidth