image.png

getClientRects

**Element.getClientRects()** 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。
返回值是ClientRect对象集合，该对象是与该元素相关的CSS边框。每个ClientRect对象包含一组描述该边框的只读属性——left、top、right和bottom，单位为像素，这些属性值是相对于视口的top-left的。即使当表格的标题在表格的边框外面，该标题仍会被计算在内。起初，微软打算让这个方法给文本的每一行都返回一个TextRectangle，但是，CSSOM工作草案规定它应该给每个边框返回一个ClientRect。因此，对于行内元素这两个定义是相同的，但是对于块级元素，Mozilla只会返回一个矩形。（译者注：对于行内元素，元素内部的每一行都会有一个边框；对于块级元素，如果里面没有其他元素，一整块元素只有一个边框）。简单来说，就是返回了描述元素四个边框与视口左上角的相对位置集合，这里一定要注意都是以左上角为基准的，如果行内元素被分为多行，则会返回每一个矩形的相对位置。MDN
image.png
image.png

getBoundingClientRect

**Element.getBoundingClientRect()** 方法返回元素的大小及其相对于视口的位置。
如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。和getClientRect类似，如发生滚动，则相对值会为负，MDN

区别

  • getBoundingClientRect不会区分行内元素被分成多少个矩形，只会以元素整体来看待
  • getClientRects会将行内元素按换行分成不同的矩形。