乐趣区

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

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

偏移尺寸(offset)

元素绝对于偏移父元素(offsetParent)的偏移尺寸。

offsetWidth

元素在程度方向上占用的像素尺寸,包含:contentpaddingvertical scrollbar(macos 零碎的滚动条不占据空间,因而不计算)border

ℹ️ 返回值:只读,不可设置;以像素为单位的整数;如果须要准确到小数,能够应用办法:element.getBoundingClientRect()

offsetHeight

元素在垂直方向上占用的像素尺寸,包含:contentpaddinghorizontal scrollbar(macos 零碎的滚动条不占据空间,因而不计算)border

ℹ️ 返回值:只读,不可设置;以像素为单位的整数;如果须要准确到小数,能够应用办法:element.getBoundingClientRect()

offsetParent

offsetLeftoffsetRight 属性的返回值,示意 元素 该元素的 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

元素外部的宽度,包含:contentpadding

❗对于 inline 元素,clientWidth 返回 0。

ℹ️ 返回值:只读,不可设置;以像素为单位的整数;如果须要准确到小数,能够应用办法:element.getBoundingClientRect()

clientHeight

元素外部的高度,包含:contentpadding

❗对于 inline 元素,clientHeight 返回 0。

ℹ️ 返回值:只读,不可设置;以像素为单位的整数;如果须要准确到小数,能够应用办法:element.getBoundingClientRect()

滚动尺寸

容器元素蕴含四个滚动属性:scrollWidthscrollHeightscrollTopscrollLeft

scrollWidth

容器元素在不应用程度滚动条时,能够全副展现外部元素的最小宽度,包含:contentpadding

<!– <p align=”center”><img src=”./3.png” width=”50%”></p> –>

ℹ️ 返回值:只读,不可设置;以像素为单位的整数;如果须要准确到小数,能够应用办法:element.getBoundingClientRect()

scrollHeight

容器元素在不应用垂直滚动条时,能够全副展现外部元素的最小高度,包含:contentpadding

<!– <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()办法

下面介绍的这些属性:offsetWidthoffsetHeightoffsetLeftoffsetTopclientWidthclientHeightscrollTopscrollLeftscrollWidthscrollHeight。返回值都是整数,与实在的数据相比,存在精度上的缺点。

为此,浏览器在每个元素上提供了 getBoundingClientRect() 办法。

返回 DOMRect 对象,蕴含 8 个属性,每个属性值都能够是小数:

  • width,其值等于 content + padding + borderWidth 的像素数
  • height,其值等于 content + padding + borderWidth 的像素数
  • x / left,元素左外侧间隔 视口左内侧 的像素数
  • y / top,元素上外侧间隔 视口上内侧 的像素数
  • right,元素右外侧间隔 视口左内侧 的像素数
  • bottom,元素下外侧间隔 视口上内侧 的像素数

总结

元素的尺寸,平时应用的频率比拟低。但用到时,面对泛滥的属性,的确容易让人混同。通过下面简练的示意图,能够疾速分辨各个属性的本质区别。心愿对大家有帮忙。

对于元素尺寸数据而言,倡议应用 getBoundingClientRect() 办法,防止因整数的四舍五入而导致的精度问题。其余特定的需要,能够应用特定的属性。

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

退出移动版