reactjs 获取真实dom，并获取dom css 三种方法

最新推荐文章于 2023-06-28 14:20:57 发布

dahuzix

最新推荐文章于 2023-06-28 14:20:57 发布

阅读量1.7w

点赞数

CC 4.0 BY-SA版权

分类专栏： reactjs 文章标签： reactjs 真实dom css

本文链接：https://blog.youkuaiyun.com/dahuzix/article/details/70186397

reactjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了三种获取HTML DOM元素样式的JavaScript方法。包括直接通过refs访问元素样式属性、使用ReactDOM.findDOMNode获取元素节点并读取样式及利用document.defaultView.getComputedStyle获取计算后的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：

let senderName = ReactDOM.findDOMNode(this.refs['sender-name']);
let nleft = senderName.style.left;
let ntop = senderName.style.top;
let nwidth = senderName.style.width;
let nheight = senderName.style.height;
console.log(nleft,ntop,nwidth,nheight);

方法2：

 let rstyle = this.refs['sender-name'].style;
let rleft = rstyle.left;
let rtop = rstyle.top;
let rwidth = rstyle.width;
let rheight = rstyle.height;
console.log(rleft,rtop,rwidth,rheight);

方法3：
let computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs['sender-name']),null);
let cleft = computedStyle.left;
let ctop = computedStyle.top;
console.log(cleft,ctop);