开发笔记

getBoundingClientRect() 方法

Element.getBoundingClientRect() 方法返回一个矩形对象，该对象表示当前元素在浏览器中的位置以及自身占据的空间的大小。矩形对象包含以下属性：

• left: 元素左边距到视口左边界的距离。
• top: 元素上边距到视口上边界的距离。
• right: 元素右边距到视口左边界的距离。
• bottom: 元素下边距到视口上边界的距离。
• width: 元素的宽度。
• height: 元素的高度。

这些属性的值是相对于视图窗口的左上角来计算的，因此它们会随着页面的滚动而改变。

示例

const rect = element.getBoundingClientRect();
console.log(rect.left, rect.top, rect.right, rect.bottom, rect.width, rect.height);

offsetLeft 属性

HTMLElement.offsetLeft 是一个只读属性，返回当前元素相对于 HTMLElement.offsetParent 节点左边界的偏移像素值。返回值包含以下部分：

1. 元素自身的左边距（margin）。
2. 元素的外边距（margin）。
3. offsetParent 元素的左侧内边距（padding）、边框（border）及滚动条。

注意： offsetParent 元素是指最近的（包含层级上的最近）包含该元素的定位元素或最近的表格单元格（<td> 或 <th> 元素），如果没有定位元素，则为 body 元素。

offsetLeft 的详细计算

• 当元素的祖先元素中没有定位元素时，它的 offsetLeft 值等于它自己的左边框左侧到 body 左边框左侧的距离，这个距离包含其自身的 margin-left 值。
• 当祖先元素中有定位元素时，元素的 offsetLeft 值等于它的左边框左侧到它的 offsetParent 元素左边框的距离减去它自身的 margin-left 值。
• 当元素自身为 fixed 定位时，它的 offsetLeft 值等于它自己的左边框左侧到 body 左边框左侧的距离，这个距离包含其自身的 margin-left 值。
• 当元素自身 display 为 none 时，它的 offsetLeft 值为 0。
• 滚动区域内的内容滚动后，内容所在元素的 offsetLeft 值不受影响。

示例

const offsetLeft = element.offsetLeft;
console.log(offsetLeft);

其他相关属性

offsetTop

offsetTop 是一个只读属性，返回当前元素相对于 offsetParent 节点上边界的偏移像素值。

offsetWidth 和 offsetHeight

offsetWidth 和 offsetHeight 是只读属性，分别返回元素的布局宽度和高度，这些值包含元素的边框、内边距和滚动条（如果存在），但不包含外边距。

clientLeft 和 clientTop

clientLeft 和 clientTop 是只读属性，分别返回元素的左边框和上边框的宽度（以像素为单位）。

element.clientWidth 和 element.clientHeight

element.clientWidth 是一个只读属性，返回元素的内部宽度（包括内边距，但不包括边框和滚动条）。它表示元素的可见内容区域的宽度。 element.clientHeight 是一个只读属性，返回元素的内部高度（包括内边距，但不包括边框和滚动条）。它表示元素的可见内容区域的高度。

element.scrollTop 和 element.scrollLeft

element.scrollTop 是一个读写属性，表示元素内容垂直滚动的像素值。可以通过设置 scrollTop 来使元素内容滚动到指定位置。 element.scrollLeft 是一个读写属性，表示元素内容水平滚动的像素值。可以通过设置 scrollLeft 来使元素内容滚动到指定位置。

element.scrollWidth 和 element.scrollHeight

element.scrollWidth 是一个只读属性，返回元素内容的实际宽度（包括由于溢出而无法看到的部分）。 element.scrollHeight 是一个只读属性，返回元素内容的实际高度（包括由于溢出而无法看到的部分）。