What is offsetHeight clientHeight scrollHeight

Question

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    x000D   x000D  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    x000D   MainDIV   x000D    border  5px solid red  x000D    x000D   lt button id  offset  gt offsetHeight  amp  offsetWidth lt  button gt  x000D   lt button id  client  gt clientHeight  amp  clientWidth lt  button gt  x000D   lt button id  scroll  gt scrollHeight  amp  scrollWidth lt  button gt  x000D   x000D   lt div id  MainDIV  style  margin auto  height 200px  width 400px  overflow auto   gt  x000D     lt div style  height 400px  width 500px  overflow hidden   gt  x000D   x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

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

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

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] What is offsetHeight, clientHeight, scrollHeight?

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to offsetheight