乐趣区

关于html:详细了解HTML元素的尺寸属性

jiezi

获取元素的尺寸信息，有很多种办法。不同的尺寸属性有不同的定义，如果没有很好的总结，就很容易混同。上面就一起来看看。

偏移尺寸（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 确定步骤 —— 依照蕴含的层级关系，从近到远顺次判断该元素的父元素：

  1. 是否为定位（position 不是 static）元素；如果是，则返回该元素。
  2. 是否为 <table>、<th>、<td> 元素；如果是，则返回该元素。
  3. 是否为 <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() 办法，防止因整数的四舍五入而导致的精度问题。其余特定的需要，能够应用特定的属性。

❗所有这些尺寸属性都是只读的，每次拜访都会从新计算。因而，应该尽量减少查问它们的次数。比方把查问的值保留在某个变量中，就能够防止影响性能。

退出移动版