Javascript – offsetHeight, clientHeight, scrollHeight?

offsetHeight,clientHeight,scrollHeight?, Javascript – offsetHeight, clientHeight, scrollHeight?, GTechHub

What is offsetHeight, clientHeight, scrollHeight? question is common among all developers & designers.

To find the dimensions and size of an HTML element in Javascript, you will come across clientHeightoffsetHeight, and scrollHeight.

When laying out a document, the browser’s rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

Every box is composed of four parts (or areas), defined by their respective edges:

  1. content edge, 
  2. padding edge, 
  3. border edge,
  4. and margin edge.
offsetHeight,clientHeight,scrollHeight?, Javascript – offsetHeight, clientHeight, scrollHeight?, GTechHub
Introduction to the CSS basic box model
(Image source: https://developer.mozilla.org)

Let me explain you in detail with the screenshots below:

What is clientHeight?

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

Here, it will leave out the size of the horizontal scrollbar and the border because they are not actual content. Margin is also not included.

It includes the following:

  1. Height of the visible content (it includes the visible padding also).
  2. The hidden content due to the vertical scrollbar is not included.
VISIBLE content & padding
offsetHeight,clientHeight,scrollHeight?, Javascript – offsetHeight, clientHeight, scrollHeight?, GTechHub

What is offsetHeight?

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.

It includes the following:

  1. Height of the visible content (it includes the visible padding also).
  2. The hidden content due to the vertical scrollbar is not included.
  3. Height of the horizontal scrollbar.
  4. Top & bottom border.
VISIBLE content & padding + border + scrollbar
offsetHeight,clientHeight,scrollHeight?, Javascript – offsetHeight, clientHeight, scrollHeight?, GTechHub

What is scrollHeight?

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

It includes the following:

  1. Height of the visible content (and the padding).
  2. Height of the the hidden content (and the padding) due to the vertical scrollbar.
ENTIRE  content & padding (visible or not)
offsetHeight,clientHeight,scrollHeight?, Javascript – offsetHeight, clientHeight, scrollHeight?, GTechHub

offsetHeight,clientHeight,scrollHeight?, Javascript – offsetHeight, clientHeight, scrollHeight?, GTechHub

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *