React中调用element.style返回空值，如何正确获取元素高度与body宽度

问题原因 #

HTMLElement.style 仅能读取元素内联样式（即直接写在DOM标签style属性中的样式），你通过css-loader、style-loader加载的外部CSS、内部style标签样式都属于外部样式表规则，不会被该属性读取，因此返回空字符串。这是原生DOM的API固有特性，完全不属于React的问题。

正确取值方案 #

要获取元素最终渲染后的实际宽高，可根据需求选择以下原生API：

• 取包含内边距、边框的元素渲染宽高：element.offsetHeight、element.offsetWidth
• 取仅包含内容区域、不含边框/滚动条的宽高：element.clientHeight、element.clientWidth
• 需要获取所有生效样式的完整声明：调用window.getComputedStyle(element)，例如取高度可写为window.getComputedStyle(element).height，返回带单位的字符串值
• 获取body宽度可直接使用document.body.offsetWidth，如果需要视口宽度可选window.innerWidth

React场景注意事项 #

在React中取值需要注意时机，必须等元素真实挂载到DOM树后再操作：

• 类组件可在componentDidMount生命周期中执行取值逻辑
• 函数组件可在useEffect回调中取值，且建议通过useRef绑定目标DOM元素，不要直接使用DOM选择器查询，避免和React渲染逻辑冲突

内容的提问来源于stack exchange，提问作者nazarenoalt