getBoundingClientRect 和 getClientRect
这两个方法都是用来获取 DOM 元素 DOMRect 盒模型的值的,DOMRect 对象包含元素大小及其相对于视口位置等属性。
- 包含
left
,top
,right
,bottom
,x
,y
,width
, 和height
等只读属性 - 属性值的单位为像素
- 位置属性是相对于视图窗口的左上角来计算
- 视图滚动(
window.scrollX
|scrollY
/pageXOffset
|pageYOffset
),top
和left
属性值随之发生变化
不同之处是:
const domRectObject = element.getBoundingClientRect();
,返回类型是 DOMRect
对象;
const domRectCollection = element.getClientRects();
,返回类型是 DOMRectList
,是一组 DOMRect
对象的集合。
如您发现有误,请联系xianghongai@gmail.com指正。
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步