What is offsetHeight, clientHeight, scrollHeight?

offsetHeight

offsetHeight is the visible height of an element, including the vertical padding, border, and the height of the horizontal scrollbar (if visible), but excluding the margin. It measures the total vertical space occupied by the element.

For example, if we have an element with the following style:

html
<div style="height: 100px; padding: 10px; border: 5px solid; margin: 10px; overflow: scroll;">
  Hello, world!
</div>

The offsetHeight of this element will be 100px (the height of the element itself) + 20px (top and bottom padding each 10px) + 10px (top and bottom border each 5px) = 130px.

clientHeight

clientHeight is the internal height of an element, including the vertical padding but excluding the height of the horizontal scrollbar, border, and margin. It represents the height of the content area plus the padding.

Continuing with the above example, the clientHeight of this element will be 100px (the height of the element itself) + 20px (top and bottom padding each 10px) = 120px, as it does not include the border or the height of the scrollbar.

scrollHeight

scrollHeight is the total height of the element's content, including parts that are not visible due to overflow. It is typically used to determine whether a scrollbar is needed.

Assume the above element contains sufficient content to cause overflow beyond the visible area:

html
<div style="height: 100px; padding: 10px; border: 5px solid; overflow: scroll;">
  Hello, world!<br>
  Hello, world!<br>
  Hello, world!<br>
  <!-- More content -->
</div>

If the total height of the content reaches 200px, then scrollHeight will be 200px, even though the visible area, due to height constraints and the scrollbar, only displays part of the content.

Summary

In summary, these three properties provide distinct measurements of the element's height, and the appropriate property can be selected based on specific requirements. Understanding and utilizing these properties is essential when designing interactive and responsive interfaces to ensure both functionality and aesthetics of the user interface.