JavaScript clientheight, ScrollHeight, offsetheight

All three are used to get the height of a DOM node, but they don't have the same meaning.

ClientHeight:

The MDN describes the attribute as follows:

Element.clientHeightThe Read-only property returns the inner height of a element in pixels, including padding and not the horizontal SC Rollbar height, border, or margin.

clientHeightcan be calculated as CSS height + CSS padding -height of horizontal scrollbar (if present).

As you can tell from the description, it is a read-only property. Represents the internal (inner) height of a DOM node, including inner padding , but excludes horizontal scrollbars , borders , and margins.

Offsetheight:

The MDN describes the attribute as follows:

The HTMLElement.offsetHeight read-only property was the height of the element including vertical padding and borders, in pixels, as a n Integer.

Typically, an element's is offsetHeight a measurement which includes the element borders, the element vertical padding, the Eleme NT Horizontal scrollbar (if present, if rendered) and the element CSS height.

For the document body object, the measurement includes total linear content height instead the element CSS height. Floated elements extending below other linear content is ignored.

Includes inner fill , border , and horizontal scroll bars , excluding margins.

ScrollHeight:

The MDN describes the attribute as follows:

The Element.scrollHeight read-only attribute is a measurement of the height of a element's content, including content not visib Le on the screens due to overflow. The scrollHeight value is equal to the minimum the clientHeight element would require in order to fit all the content in the viewpoint WI Thout using a vertical scrollbar. It includes the element padding but isn't its margin.

Similarly it is also a read-only property. Represents the contents (content) Heightof a DOM node, including content that is not visible due to overflow, and also includes padding , but excluding borders and margins .

JavaScript clientheight, ScrollHeight, offsetheight