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 对象的集合

posted @ 2020-10-06 15:01  大象  阅读(552)  评论(0编辑  收藏  举报
可以联系我进行沟通和合作 可以给我发邮件