快速资源了解更多关于所有的JS高度 [英] Quick resource to learn more about all the JS height's
问题描述
在JavaScript中有很多'Height'相关联的属性（clientHeight，Window.height，scrollHeight，offsetHeight等）。
There're quite a few 'Height' associated properties in JavaScript (clientHeight, Window.height, scrollHeight, offsetHeight, etc.).
他们做，但我想一个正式，详细的指南...通用谷歌没有帮助，任何好的来源，我可以使用？
I can guess what they do, but I'd like a formal, detailed guide... Generic googling hasn't helped, any good sources I could use?
推荐答案
有两种资源值得咨询：
- CSSOM View Module
- W3C DOM Compatibility - CSS Object Model View
下面是两个摘录的列表（每个对都包含一个维度）：
Below is a list of excerpt from the two (only one dimension has been included for each pair):
window.innerWidth & window.innerHeight
视口的尺寸（浏览器窗口内部）。 innerWidth 属性，在获取时，必须返回视口宽度，包括呈现的滚动条的大小（如果有）。
window.innerWidth & window.innerHeight
The dimensions of the viewport (interior of the browser window). The innerWidth attribute, on getting, must return the viewport width including the size of a rendered scroll bar (if any).
window.outerWidth & window.outerHeight
整个浏览器窗口的尺寸（包括任务栏等）。 outerWidth 属性，在获取时，必须返回客户端窗口的宽度。如果没有客户窗口，此属性必须返回零。
window.outerWidth & window.outerHeight
The dimensions of the entire browser window (including taskbars and such). The outerWidth attribute, on getting, must return the width of the client window. If there is no client window this attribute must return zero.
window.pageXOffset & window.pageYOffset
整个页面已经滚动的像素数。 pageXOffset 属性，在获取时，必须返回视口左侧相对于初始包含块原点的x坐标。
window.pageXOffset & window.pageYOffset
The amount of pixels the entire pages has been scrolled. The pageXOffset attribute, on getting, must return the x-coordinate, relative to the initial containing block origin, of the left of the viewport.
window.screenX & window.screenY
浏览器窗口在屏幕上的位置。 screenX 属性，在获取时，必须返回相对于输出设备屏幕的原点的x坐标
window.screenX & window.screenY
The position of the browser window on the screen. The screenX attribute, on getting, must return the x-coordinate, relative to the origin of the screen of the output device, of the top of the client window as number of pixels, or zero if there is no such thing.
screen.availHeight & screen.availWidth
屏幕上可用的宽度和高度（不包括操作系统任务栏等）。 availWidth 属性，在获取时，必须返回输出设备的呈现表面的可用宽度。
screen.availHeight & screen.availWidth
The available width and height on the screen (excluding OS taskbars and such). The availWidth attribute, on getting, must return the available width of the rendering surface of the output device.
screen.height & screen.width
屏幕的宽度和高度。 width 属性，在获取时，必须返回输出设备的宽度。
screen.height & screen.width
The width and height of the screen. The width attribute, on getting, must return the width of the output device.
< element> .clientLeft & < element> .clientTop
内容字段的左上角相对于整个左上角的位置元素（包括边框）。在获取时， clientTop 属性返回 border-top-width 属性的计算值加上任何滚动条的宽度在顶部填充边缘和顶部边缘边缘之间呈现。
<element>.clientLeft & <element>.clientTop
The position of the upper left corner of the content field relative to the upper left corner of the entire element (including borders). On getting, the clientTop attribute returns the computed value of the border-top-width property plus the width of any scrollbar rendered between the top padding edge and the top border edge.
< element> .clientWidth & < element> .clientHeight
内容字段的宽度和高度，不包括边框和滚动条，在获取时， clientWidth 属性返回视口宽度，不包括渲染滚动条的大小（如果有），如果元素是根元素和填充边缘的宽度不包括填充边缘和边界边缘之间的任何渲染的滚动条的宽度）。
<element>.clientWidth & <element>.clientHeight
The width and height of the content field, excluding border and scrollbar, but including padding. On getting, the clientWidth attribute returns the viewport width excluding the size of a rendered scroll bar (if any) if the element is the root element and the width of the padding edge (excluding the width of any rendered scrollbar between the padding edge and the border edge) otherwise.
< element> .offsetLeft & < element> .offsetTop
元素相对于其offsetParent的左上角位置。 offsetTop 属性在元素 上调用时，必须返回以下算法的结果值： （1）如果 A 是HTML body 元素或没有关联的CSS布局框，则返回零并停止此算法。 （2）如果 A 的 offsetParent 是 null 或HTML body 元素返回 A 顶边界的y坐标，并停止此算法。 （3）返回从顶部的y坐标减去 A 的 offsetParent 的顶部填充边缘的y坐标的结果相对于初始包含块原点的边缘 A 。 （*）在内联元素由多个行框组成的情况下，为了上述算法的目的，只考虑内容顺序中的第一个。
<element>.offsetLeft & <element>.offsetTop
The left and top position of the element relative to its offsetParent. The offsetTop attribute, when called on element A, must return the value that is the result of the following algorithm: (1) If A is the HTML body element or does not have an associated CSS layout box return zero and stop this algorithm. (2) If the offsetParent of A is null or the HTML body element return the y-coordinate of the top border edge of A and stop this algorithm. (3) Return the result of subtracting the y-coordinate of the top padding edge of the offsetParent of A from the y-coordinate of the top border edge of A, relative to the initial containing block origin. (*) In case of an inline element that consists of multiple line boxes only the first in content order is to be considered for the purposes of the above algorithm.
< element> .offsetWidth & < element> .offsetHeight
整个元素的宽度和高度，包括边框。 offsetWidth 属性在元素 上调用时，必须返回以下算法的结果值： 1）如果A没有关联的CSS布局框返回零并停止此算法。 （2）返回 A的边框边缘宽度。
<element>.offsetWidth & <element>.offsetHeight
The width and height of the entire element, including borders. The offsetWidth attribute, when called on element A, must return value that is the result of the following algorithm: (1) If A does not have an associated CSS layout box return zero and stop this algorithm. (2) Return the border edge width of A.
< element> .scrollLeft & < element> .scrollTop
元素已滚动的像素数。读/写。 scrollTop 属性在元素 上调用时，必须返回运行以下算法的结果值：（1）如果 A 没有关联的CSS布局框，则返回零并停止此算法。 （2）将对齐点处的内容的y坐标返回为 A 的内容边缘的顶部。
<element>.scrollLeft & <element>.scrollTop
The amount of pixels the element has scrolled. Read/write. The scrollTop attribute, when called on element A, must return the value that is the result of running the following algorithm: (1) If A does not have an associated CSS layout box return zero and stop this algorithm. (2) Return the y-coordinate of the content at the alignment point with the top of the content edge of A.
< element> .scrollWidth & < element> .scrollHeight
整个内容字段的宽度和高度，包括当前隐藏的那些部分。如果没有隐藏的内容，它应该等于clientX / Y。 scrollWidth 属性在元素 上调用时，必须返回以下算法的结果值： 1）如果 A 没有关联的CSS布局框，则返回零并停止此算法。 （2）返回 A 的 padding-left 属性的计算值加上 padding-右属性 加上 A 的内容宽度。
<element>.scrollWidth & <element>.scrollHeight
The width and height of the entire content field, including those parts that are currently hidden. If there's no hidden content it should be equal to clientX/Y. The scrollWidth attribute, when called on element A, must return value that is the result of the following algorithm: (1) If A does not have an associated CSS layout box return zero and stop this algorithm. (2) Return the computed value of the padding-left property of A, plus the computed value of the padding-right property of A, plus the content width of A.
这篇关于快速资源了解更多关于所有的JS高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
