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?
Answers with the details in 'em earn brownie points!
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.
Related
MDN says that Element.clientWidth "will round the value to an integer" and I should use Element.getBoundingClientRect() instead for a fractional value. While the part with the fractional value is correct, that function has a different meaning and cannot be compared.
clientWidth gives me the inner visible width without the vertical scrollbar. getBoundingClientRect gives me the outer width including the vertical scrollbar. These are entirely different sizes.
Is this intentional? Does the MDN article know about that difference? Should that restriction be added to the cross-link? What else can I do to get the desired value, which is the visible width with a fractional value?
My problem is that I'm writing code that hides elements that won't fit in the current view, depending on the view width and the elements' width. Therefore I sum up all elements' widths and compare it with the space I have. At certain window sizes, that can lead to the element width sum of 945.4 (that fits in) and the clientWidth giving me 945 (same value but rounded down, so it's less). getBoundingClientRect however gives me 951.2 in this case which is more than is actually available for the content. In consequence, a horizontal scrollbar appears which I don't want.
In the DOM, what is the difference between an element’s offsetHeight and its scrollHeight? An image in explanation would be a great help.
HTMLElement.offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
HTMLElement.scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow. The value returned by HTMLElement.scrollHeight WILL include the padding-top and padding-bottom, but will NOT include the element borders or the element horizontal scrollbar.
This page and this page are my sources.
The MDN documentation also provides images to demonstrate.
As #Csarsam said, offset height is the border-box height (I'm rewording). Scroll height, is the height of the scrollable content, which is generally composed of multiple elements. But scroll height it also defined on elements which does not scroll, hence does not have a scrollable content, in which case (I’ve checked but I have no reference to back it up) scroll height is its content height, that is, it does not include the margins and borders. But when the element is part of a scrollable content, its margin are taken into account to compute the scroll height of its parent.
Scroll height is defined on both scrollable content and non‑scrollable content, that’s what may confuse.
Update
Here is a reference which confirms what I’ve checked: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
the alerts are as follows:
alert(document.getElementById("col_st_scroll").offsetHeight);
alert(document.getElementById("col_st_scroll").style.height);
now, the col_st_scroll element is fully visible in the web browser, shouldn't that mean offsetHeight and style.height should returnt he same value?
problem solved. The element was resized by another function in the time it took to click ok ont he first alert.
This is from MDN:
Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
The style.height property represents the content height only (assuming you're on "strict" rendering mode, not "quirks").
I need help with this two elements properties.
According MDN element.scrollHeight "this a height of the scroll view of an element; it includes the element padding but not its margin", and element.offsetHeight "Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height."
I am trying to debug some javascript code and don't understand why document.body.scrollHeight can be greater than document.body.offsetHeight?
For example, my document.body.offsetHeight=909, but document.body.scrollHeight=1059 (body don't have any margins or paddings or borders), so we lost 150px somewhere. I inspected body and it height=909, and this is very confuse me. This reproduced in chrome and firefox.
Can you please help me in this question?
The offsetHeight property describes how far from the top of the current available space in the active window. The scrollHeight property is how far in pixels from the inside top of a contain to the inside bottom, which is different than clientHeight on a container set to a limited height with overflow:scroll css property.
I am using most of these in project I am working on at http://prettydiff.com/jsgui/
I notice that offsetwidth is a slightly bigger number. Similarly for style.height and offsetheight.
offsetWidth returns computed element's width, while el.style.width just returns width property defined in element.style by javascript and does not reflect real element's dimensions.
This means that if you will try to get a width of the element by accessing el.style, you will probably get nothing (sample), even if the width was defined in your CSS. You will get the number only if it was defined in el.style by javascript.
Furthermore, offsetWidth gives you real width of your element, including padding and border if you use content-box css box model which is default value for box-sizing. So you can think about that like you set width of the contents of the element and padding/border go on top of that (sample).
If you are using border-box css box model, you set the total width of the element, including padding and border make the content area smaller (sample). So, in this case, offsetWidth and el.style.width would return exactly the same numbers (if el.style.width was previously set by javascript).
Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
Source: https://developer.mozilla.org/en/DOM/element.offsetWidth
So, it's the width of your element with border and padding included. Same thing for height.
offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars.
clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)
with only return the css with defined