记录getBoundingClientRect和getClientRects

getBoundingClientRect()

DOM元素的一个方法，用来返回Element元素的css盒模型的所有信息，并返回一个DOMRect对象，对象内包括元素的大小、位置等。

语法

element.getBoundingClientRect()

返回值

{
	bottom: 118, //元素底部距离窗口顶部距离(等于y + height)
	height: 110, // 元素的高度值
	left: 8, // 元素左侧距离窗口左侧的距离
	right: 599.015625, // 元素右侧距离窗口的左侧距离 (等同于x + width)
	top: 8, // 元素顶部距离窗口的距离，可以是赋值
	width: 591.015625, // 元素的宽度值
	x: 8, // 元素左上角相对于视口的横坐标
	y: 8 // 元素左上角相对于视口的纵坐标
}

说明

1. 所有的返回值都是基于视窗大小的，当改变视窗大小，滚动视窗的滚动条时候其中的一些值会跟着变化。
2. 此方法获取的元素的width和height都是按照元素的 border + padding + content来计算的，因此并不能获取元素的内容区宽高。
3. 此方法返回的值是一个DOMRect对象，所以使用Object的keys，values方法并不能遍历该方法中的值，它提供了一个toJSON方法可以把DOMRect对象转换成object对象。

getClientRects()

此方法和getBoundingClientRect()类似，他返回的是一个类似数组的对象，里面是当前元素在页面上形成的所有矩形（所以方法名中的Rect用的是复数）。每个矩形都有bottom、height、left、right、top和width六个属性，表示它们相对于视口的四个坐标，以及本身的高度和宽度。
该方法如果用在块元、行内块素上，返回当前元素的信息和getBoundingClientRect()方法相同，只不过是数组形式。如果是在行内元素使用，他返回的是当前行内元素内形成具体的每一行信息。

语法

element.getClientRects();

返回值

<div class="box"><span>The returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width. The left, top, right, bottom, x, y, width, and height properties describe the position and size of the overall rectangle in pixels. Properties other than width and height are relative to the top-left of the viewport. </span></div>

上边的返回值是用在了块元素中的一个行内元素上，并且返回的是一个数组，每个数组包含的是行内元素中每行的信息，在上图中的文本被浏览器分成了8行，此时返回的就是包含这8行信息的数组。

当把getClientRects()方法用在块元素上效果：

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

https://javascript.ruanyifeng.com/dom/element.html#toc29