For details about DOM element dimensions, such as offsetWidth, scrollWidth, and clientWidth, offsetwidth

For details about DOM element dimensions, such as offsetWidth, scrollWidth, and clientWidth, offsetwidth

Example:

<div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow:auto;padding:50px">    <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div>    <script>    var div=document.getElementById("div");    var ho=div.offsetHeight;    var hc=div.clientHeight;    console.log(ho,hc);    </script></div>

1. offsetWidth

OffsetWidth = border + padding + height;
Here: 50 + 50 + 200 + 50 + 50 = 400

Note:OffsetWidthYou cannot obtain the correct value in the div of display: none. You can use jquery'sOuterWidth ()Correct

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

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.