ClientTop, ClientWidth, OffsetTop, offsetwidth

<id= "Drag"  class= "Drag">Drag Me</ Div >

 <script type= "Text/javascript" > window.onload  = function   (e) {e  = e | |         window.event;         var  drag = O (' drag ' );    Console.log (Drag.offsetwidth);  function   O (id) { return   document.getElementById (ID);  }  </script> 
 
 Drag.clienttop = top border of drag = ten 
 
 Drag.clientwidth = padding + drag actual width = 20 + 500 + 20 = 540 
 
 Drag.offsettop = top margin of drag = 5//left, right, bottom and so on 

Drag.offsetwidth = border + inner margin + drag actual width = 10 + 20 + 500 + 20 + 10 = 560

--------------------------------------------------------------------------------

Drag.scrolltop   = height to be rolled up

ClientTop, ClientWidth, OffsetTop, offsetwidth