Details about DOM element dimensions, such as offsetWidth, scrollWidth, and clientWidth

Details about DOM element dimensions, such as offsetWidth, scrollWidth, and clientWidth

Example:

  <script> var div=document.getElementById(div); var ho=div.offsetHeight; var hc=div.clientHeight; console.log(ho,hc); </script> 1. offsetWidth

OffsetWidth = border + padding + height;
Here: 50 + 50 + 200 + 50 + 50 = 400 <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Authorization + signature/Signature/ci3u/g1wzwvcd4nc1_vymxvy2txdw90zt4ncjxomibpzd0 = "2 clientwidth"> 2. clientWidth

ClientWidth = padding + height-Scroll bar
The value is 50 + 200 + 50-17 = 283.

Note: jquery'sInnerWidth ()Do not calculate the scroll bar. Expected result 300 is displayed.

3. scrollWidth

ScrollWidth = padding + full height of content contained
The value is 50 + 402 + 50 = 502.

4. scrollTop

Definition: gets the distance between the top boundary of the element and the top of the currently visible content in the element.

ScrollTop = scrollHeight-clientHeight
= Padding + full height of content included-(padding + height-scroll bar)
= Full height of the content included-height-scroll bar