最近使用 D3.js
开发可视化图表,因为移动端做了 rem
适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下。
一、获取元素
在 Vue
中可以使用 ref
来获取一个真实的 DOM 元素。
为了保险起见,所有的 DOM 操作建议都放在 $nextTick()
方法中。
1 |
|
二、获取元素宽高
- 使用 offsetWidth 、 offsetHeight 方法,返回 Number 类型的值,如:
52
。
1 |
|
- 使用 window 全局对象中的 getComputedStyle API,返回 String 类型的值,包含px单位,如:
'100px'
。
1 |
|
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2022-07-13
最后更新: 2023-07-17
本文标题: 在Vue中获取DOM元素的实际宽高
本文链接: https://www.tiven.cn/p/2979bc10/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2022-07-13
最后更新: 2023-07-17
本文标题: 在Vue中获取DOM元素的实际宽高
本文链接: https://www.tiven.cn/p/2979bc10/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
v1.4.16