可以说我有一个类似的DOM元素:
render () {
...
return (
<div className = "widePaddingRight" style = {{width: "100px"}}
ref = "pickMe"
>
...
</div>
)
}
CSS:
.widePaddingRight{
paddingRight: 20px
}
如果以后再访问此元素,然后尝试像这样获取其宽度:
componentDidMount () {
var elem = this.refs.pickMe.getDOMNode().getBoundingClientRect()
console.log(elem.width)
}
我在控制台中得到
120
。我的预期结果是100
。由于我必须使用原始宽度进行计算,因此必须获取元素的填充属性。问题:如何在我的react-class中获得组件的
paddingRight
属性?更新资料
使用@Mike'Pomax'Kamermans的输入,我能够解决潜在的问题(谢谢您):只需在CSS中添加
box-sizing: border-box
即可。现在,getBoundingClientRect()
给出100
而不是120
。我仍然不知道如何从已挂载的div获取CSS类属性-有什么建议吗?
最佳答案
const style = window.getComputedStyle(React.findDOMNode(this.refs.pickMe));