如何通过React的ref获取元素border-radius？当前方法未生效

ref.current.style.borderRadius只能读取元素的内联样式——也就是直接写在元素style属性里的样式。如果你的border-radius是通过CSS类、全局样式表定义的，这个方法自然拿不到值。

正确的做法是用window.getComputedStyle()获取元素最终渲染的计算样式：

// 确保ref已绑定到DOM元素，比如在useEffect中执行
useEffect(() => {
  if (ref.current) {
    const computedStyle = window.getComputedStyle(ref.current);
    const borderRadius = computedStyle.borderRadius;
    console.log('当前圆角值:', borderRadius); // 输出实际渲染的数值，比如"10px"或"50%"
  }
}, []);

几个注意点：

• getComputedStyle返回的是浏览器计算后的最终样式，不管样式来自内联、类还是全局样式表
• 返回的单位可能和你定义的不一致（比如你写0.5rem，可能返回8px，取决于根字体大小）
• 必须确保ref.current不为null，所以建议在组件挂载完成后（比如useEffect空依赖）再执行这个操作

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