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指正。