[javascript] 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) {_x000D_
  var mainDiv = document.getElementById("MainDIV");_x000D_
  if (window.sampleDiv == null) {_x000D_
    var div = document.createElement("div");_x000D_
    window.sampleDiv = div;_x000D_
  }_x000D_
  div = window.sampleDiv;_x000D_
  var propTypeWidth = propType.toLowerCase() + "Width";_x000D_
  var propTypeHeight = propType + "Height";_x000D_
_x000D_
  var computedStyle = window.getComputedStyle(mainDiv, null);_x000D_
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");_x000D_
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");_x000D_
_x000D_
  div.style.position = "absolute";_x000D_
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";_x000D_
  div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";_x000D_
  div.style.height = mainDiv[propTypeHeight] + "px";_x000D_
  div.style.lineHeight = mainDiv[propTypeHeight] + "px";_x000D_
  div.style.width = mainDiv[propTypeWidth] + "px";_x000D_
  div.style.textAlign = "center";_x000D_
  div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +_x000D_
    mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";_x000D_
_x000D_
_x000D_
_x000D_
  div.style.background = "rgba(0,0,255,0.5)";_x000D_
  document.body.appendChild(div);_x000D_
_x000D_
}_x000D_
document.getElementById("offset").onclick = function() {_x000D_
  whatis('offset');_x000D_
}_x000D_
document.getElementById("client").onclick = function() {_x000D_
  whatis('client');_x000D_
}_x000D_
document.getElementById("scroll").onclick = function() {_x000D_
  whatis('scroll');_x000D_
}

#MainDIV {_x000D_
  border: 5px solid red;_x000D_
}

<button id="offset">offsetHeight & offsetWidth</button>_x000D_
<button id="client">clientHeight & clientWidth</button>_x000D_
<button id="scroll">scrollHeight & scrollWidth</button>_x000D_
_x000D_
<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">_x000D_
  <div style="height:400px; width:500px; overflow:hidden;">_x000D_
_x000D_
  </div>_x000D_
</div>

My descriptions for the three:

• offsetHeight: How much of the parent's "relative positioning" space is taken up by the element. (ie. it ignores the element's position: absolute descendents)
• clientHeight: Same as offset-height, except it excludes the element's own border, margin, and the height of its horizontal scroll-bar (if it has one).
• scrollHeight: How much space is needed to see all of the element's content/descendents (including position: absolute ones) without scrolling.

Then there is also:

• getBoundingClientRect().height: Same as scrollHeight, except that it's calculated after the element's css transforms are applied.

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

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

Offset Means "the amount or distance by which something is out of line". Margin or Borders are something which makes the actual height or width of an HTML element "out of line". It will help you to remember that :

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

On the other hand, clientHeight is something which is you can say kind of the opposite of OffsetHeight. It doesn't include the border or margins. It does include the padding because it is something that resides inside of the HTML container, so it doesn't count as extra measurements like margin or border. So :

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

ScrollHeight is all the scrollable area, so your scroll will never run over your margin or border, so that's why scrollHeight doesn't include margin or borders but yeah padding does. So:

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