Quick resource to learn more about all the JS height's

Question

There\'re quite a few \'Height\' associated properties in JavaScript (clientHeight, Window.height, scrollHeight, offsetHeight, etc.).

I can guess what they do, but I

Answer 1

Two resources worth consulting:

• 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
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
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
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
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
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
The width and height of the screen. The width attribute, on getting, must return the width of the output device.

<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
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
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
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
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
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.