共计 3050 个字符，预计需要花费 8 分钟才能阅读完成。
获取元素的尺寸信息，有很多种办法。不同的尺寸属性有不同的定义，如果没有很好的总结，就很容易混同。上面就一起来看看。
偏移尺寸（offset）
元素绝对于偏移父元素（offsetParent）的偏移尺寸。
offsetWidth
元素在程度方向上占用的像素尺寸，包含：content、padding、vertical scrollbar（macos 零碎的滚动条不占据空间，因而不计算）、border。
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
offsetHeight
元素在垂直方向上占用的像素尺寸，包含：content、padding、horizontal scrollbar（macos 零碎的滚动条不占据空间，因而不计算）、border。
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
offsetParent
offsetLeft和 offsetRight 属性的返回值，示意 元素 与该元素的 offsetParent之间的偏移间隔，因而确定 offsetParent 很重要。
元素的 offsetParent 确定步骤 —— 依照蕴含的层级关系，从近到远顺次判断该元素的父元素：
- 是否为定位（position 不是 static）元素；如果是，则返回该元素。
- 是否为
<table>、<th>、<td>元素；如果是，则返回该元素。 - 是否为
<body>元素；如果是，则返回该元素。
offsetParent 为 null 的状况：
- 如果该元素或者其父元素的款式属性
display设置为none。 - 如果该元素的款式属性
position设置为fixed（Firefox 返回<body>）。 - 该元素为
<body>或<html>。
offsetLeft
定义：元素左边框外侧间隔该元素 offsetParent 左边框内侧的像素数。
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
offsetTop
定义：元素上边框外侧间隔该元素 offsetParent 上边框内侧的像素数。
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
客户端尺寸
clientWidth
元素外部的宽度，包含：content、padding。
❗对于 inline 元素，clientWidth 返回 0。
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
clientHeight
元素外部的高度，包含：content、padding。
❗对于 inline 元素，clientHeight 返回 0。
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
滚动尺寸
容器元素蕴含四个滚动属性：scrollWidth、scrollHeight、scrollTop、scrollLeft。
scrollWidth
容器元素在不应用程度滚动条时，能够全副展现外部元素的最小宽度，包含：content、padding。
<!– <p align=”center”><img src=”./3.png” width=”50%”></p> –>
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
scrollHeight
容器元素在不应用垂直滚动条时，能够全副展现外部元素的最小高度，包含：content、padding。
<!– <p align=”center”><img src=”./3.png” width=”50%”></p> –>
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
scrollTop
获取该属性时，返回：容器元素在垂直方向滚动的像素数。
设置该属性时：设定容器元素在垂直方向滚动的像素数。
❗垂直方向设置滚动像素数的范畴：[0, scrollHeight – clientHeight]；
- 小于 0 时，
scrollTop被设置为 0。 - 大于
scrollHeight - clientHeight时，scrollTop被设置为scrollHeight - clientHeight。
<!– <p align=”center”><img src=”./3.png” width=”50%”></p> –>
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
scrollLeft
获取该属性时，返回：容器元素在程度方向滚动的像素数。
设置该属性时：设定容器元素在程度方向滚动的像素数。
❗程度方向设置滚动像素数的范畴：[0, scrollWidth – clientWidth]；
- 小于 0 时，
scrollLeft被设置为 0。 - 大于
scrollWidth - clientWidth时，scrollTop被设置为scrollWidth - clientWidth。
<!– <p align=”center”><img src=”./3.png” width=”50%”></p> –>
ℹ️ 返回值：只读，不可设置；以像素为单位的整数；如果须要准确到小数，能够应用办法：element.getBoundingClientRect()。
确定元素尺寸 — getBoundingClientRect()办法
下面介绍的这些属性：offsetWidth、offsetHeight、offsetLeft、offsetTop、clientWidth、clientHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight。返回值都是整数，与实在的数据相比，存在精度上的缺点。
为此，浏览器在每个元素上提供了 getBoundingClientRect() 办法。
返回 DOMRect 对象，蕴含 8 个属性，每个属性值都能够是小数：
- width，其值等于 content + padding + borderWidth 的像素数
- height，其值等于 content + padding + borderWidth 的像素数
- x / left，元素左外侧间隔 视口左内侧 的像素数
- y / top，元素上外侧间隔 视口上内侧 的像素数
- right，元素右外侧间隔 视口左内侧 的像素数
- bottom，元素下外侧间隔 视口上内侧 的像素数
总结
元素的尺寸，平时应用的频率比拟低。但用到时，面对泛滥的属性，的确容易让人混同。通过下面简练的示意图，能够疾速分辨各个属性的本质区别。心愿对大家有帮忙。
对于元素尺寸数据而言，倡议应用 getBoundingClientRect() 办法，防止因整数的四舍五入而导致的精度问题。其余特定的需要，能够应用特定的属性。
❗所有这些尺寸属性都是只读的，每次拜访都会从新计算。因而，应该尽量减少查问它们的次数。比方把查问的值保留在某个变量中，就能够防止影响性能。
