了解更多有关 JS 身高的快速资源

2023-12-11

JavaScript 中有很多与“高度”相关的属性(clientHeight、Window.height、scrollHeight、offsetHeight 等)。

我可以猜测他们是做什么的,但我想要一份正式的、详细的指南...通用谷歌搜索没有帮助,我可以使用任何好的资源吗?

包含详细信息的答案可赚取布朗尼积分!


两个值得咨询的资源:

  • CSSOM 视图模块
  • W3C DOM 兼容性 - CSS 对象模型视图

以下是两者的摘录列表(每对仅包含一个维度):

window.innerWidth & window.innerHeight
视口的尺寸(浏览器窗口的内部)。这innerWidth属性,在获取时,must返回视口宽度,包括渲染的滚动条的大小(如果有)。

window.outerWidth & window.outerHeight
整个浏览器窗口的尺寸(包括任务栏等)。这outerWidth属性,在获取时,must返回客户端窗口的宽度。如果没有客户端窗口这个属性must返回零。

window.pageXOffset & window.pageYOffset
整个页面已滚动的像素数量。这pageXOffset属性,在获取时,must返回视口左侧相对于初始包含块原点的 x 坐标。

window.screenX & window.screenY
浏览器窗口在屏幕上的位置。这screenX属性,在获取时,must以像素数形式返回客户端窗口顶部相对于输出设备屏幕原点的 x 坐标,如果没有这样的东西,则返回零。

screen.availHeight & screen.availWidth
屏幕上的可用宽度和高度(不包括操作系统任务栏等)。这availWidth属性,在获取时,must返回输出设备渲染表面的可用宽度。

screen.height & screen.width
屏幕的宽度和高度。这width属性,在获取时,must返回输出设备的宽度。

<element>.clientLeft & <element>.clientTop
内容字段的左上角相对于整个元素(包括边框)左上角的位置。得到后,clientTop属性返回计算值border-top-width属性加上顶部内边距边缘和顶部边框边缘之间呈现的任何滚动条的宽度。

<element>.clientWidth & <element>.clientHeight
内容字段的宽度和高度,不包括边框和滚动条,但包括填充。得到后,clientWidth如果元素是根元素,属性返回视口宽度,不包括渲染的滚动条(如果有)的大小,否则返回填充边缘的宽度(不包括填充边缘和边框边缘之间的任何渲染的滚动条的宽度)。

<element>.offsetLeft & <element>.offsetTop
元素相对于其 offsetParent 的左侧和顶部位置。这offsetTop属性,当在元素上调用时A, must返回以下算法的结果值: (1) 如果A是 HTMLbody元素或没有关联的 CSS 布局框返回零并停止此算法。 (2) 如果offsetParent of A is null或 HTMLbody元素返回上边框边缘的 y 坐标A并停止这个算法。 (3) 返回减去顶部padding边缘的y坐标的结果offsetParent of A从顶部边框边缘的 y 坐标A,相对于初始包含块原点。 (*) 如果内联元素由多个行框组成,则出于上述算法的目的,仅考虑内容顺序中的第一个元素。

<element>.offsetWidth & <element>.offsetHeight
整个元素的宽度和高度,包括边框。这offsetWidth属性,当在元素上调用时A, must返回值是以下算法的结果: (1) 如果 A 没有关联的 CSS 布局框,则返回零并停止该算法。 (2) 返回边框边缘宽度A.

<element>.scrollLeft & <element>.scrollTop
元素滚动的像素数量。读/写。这scrollTop属性,当在元素上调用时A, must返回运行以下算法的结果值: (1) 如果A没有关联的 CSS 布局框返回零并停止此算法。 (2) 返回内容与内容边缘顶部对齐点处的 y 坐标A.

<element>.scrollWidth & <element>.scrollHeight
整个内容字段的宽度和高度,包括当前隐藏的部分。如果没有隐藏内容,它应该等于 clientX/Y。这scrollWidth属性,当在元素上调用时A, must返回值是以下算法的结果: (1) 如果A没有关联的 CSS 布局框返回零并停止此算法。 (2) 返回计算值padding-left的财产A,加上计算值padding-right的财产A,加上内容宽度A.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

了解更多有关 JS 身高的快速资源 的相关文章