What is offsetHeight, clientHeight, scrollHeight?

What is offsetHeight, clientHeight, scrollHeight?

Thought of explaining what is the difference between offsetHeight, clientHeight and scrollHeight or offsetWidth, clientWidth and scrollWidth?
One must know this difference before working on the client side. Otherwise half of their life will be spent in fixing the UI.
Fiddle, or inline below:

function whatis(propType) {
var mainDiv = document.getElementById(“MainDIV”);
if (window.sampleDiv == null) {
var div = document.createElement(“div”);
window.sampleDiv = div;
}
div = window.sampleDiv;
var propTypeWidth = propType.toLowerCase() + “Width”;
var propTypeHeight = propType + “Height”;

var computedStyle = window.getComputedStyle(mainDiv, null);
var borderLeftWidth = computedStyle.getPropertyValue(“border-left-width”);
var borderTopWidth = computedStyle.getPropertyValue(“border-top-width”);

div.style.position = “absolute”;
div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == “client”) ? borderLeftWidth : 0)) + “px”;
div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == “client”) ? borderTopWidth : 0)) + “px”;
div.style.height = mainDiv[propTypeHeight] + “px”;
div.style.lineHeight = mainDiv[propTypeHeight] + “px”;
div.style.width = mainDiv[propTypeWidth] + “px”;
div.style.textAlign = “center”;
div.innerHTML = propTypeWidth + ” X ” + propTypeHeight + “( ” +
mainDiv[propTypeWidth] + ” x ” + mainDiv[propTypeHeight] + ” )”;

div.style.background = “rgba(0,0,255,0.5)”;
document.body.appendChild(div);

}
document.getElementById(“offset”).onclick = function() {
whatis(‘offset’);
}
document.getElementById(“client”).onclick = function() {
whatis(‘client’);
}
document.getElementById(“scroll”).onclick = function() {
whatis(‘scroll’);
}
#MainDIV {
border: 5px solid red;
}


Solutions/Answers:

Solution 1:

To know the difference you have to understand the box model, but basically:

Related:  Get full height of element? [duplicate]

clientHeight:

returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin

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.

scrollHeight:

is a measurement of the height of an element’s content including content not visible on the screen due to overflow


I will make it easier:

Consider:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>                                    

scrollHeight: ENTIRE content & padding (visible or not)
Height of all content + paddings, despite of height of the element.

clientHeight: VISIBLE content & padding
Only visible height: content portion limited by explicitly defined height of the element.

offsetHeight: VISIBLE content & padding + border + scrollbar
Height occupied by the element on document.

scrollHeight
clientHeight and offsetHeight

Solution 2:

* offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar.

* clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.

* scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight: it includes the element’s padding, but not its border, margin or horizontal scrollbar.

Related:  Is there any well-known method for DRYing JSON

Same is the case for all of these with width instead of height.