getBoundingClientRect 和 getClientRect

这两个方法都是用来获取 DOM 元素 DOMRect 盒模型的值的,DOMRect 对象包含元素大小及其相对于视口位置等属性。

  • 包含 left, top, right, bottom, x, y, width, 和 height等只读属性
  • 属性值的单位为像素
  • 位置属性是相对于视图窗口的左上角来计算
  • 视图滚动(window.scrollX|scrollY/pageXOffset|pageYOffset),topleft 属性值随之发生变化

不同之处是:

const domRectObject = element.getBoundingClientRect();,返回类型是 DOMRect 对象

const domRectCollection = element.getClientRects();,返回类型是 DOMRectList,是一组 DOMRect 对象的集合

原文地址:https://www.cnblogs.com/daxiang/p/13773434.html