The difference between style.height, offsetheight, ClientHeight and ScrollHeight

Style.height
Scroll bars including elements, excluding borders

clientheight
Scroll bars and borders that do not include elements

offsetheight
Include the scrollbar and border of the element

scrollheight
Offsetheight+scrolltop

Tips:
Under IE, create a Oli

 <style ;   li  {/* Do not set the height of Li */ }    </ style ;  <script ;   var  oLi = document.createelement (  ' Li ' ); Oli.innerhtml= I am Li's content ' ; /* gets the current style method OLi (getComputedStyle) before OLi has been added to the parent. Height can only return "auto" and oli.clientheight can return actual height */ document.body.appendChild (oLi); </script ;  

Copyright NOTICE: This article for Bo Master original article, reprint also please message.

The difference between style.height, offsetheight, ClientHeight and ScrollHeight