Comparison of the differences between different heights and tops in js_Basic knowledge

Every time I see clientHeight(clientTop), offsetHeight(offsetTop), scrollHeight(scrollTop) in js, I get confused and I can’t tell the difference between them. However, it’s not worth encountering these once or twice. Then you have to look at the differences each time to decide which one to use.

This article is mainly based on Chrome. There may be some differences between various browsers, but many of them have not been encountered by me and are not very clear. I will record them when I encounter similar compatibility issues in the future. Here, this time I will record the differences between various properties in the Chrome browser to facilitate future viewing

The difference between clientHeight, offsetHeight and scrollHeight

ClientHeight is basically the same in various browsers. It is agreed that it is the height of the visible area of ​​​​the content, which means the height of the area where the content can be seen in the page browser, excluding scroll bars and margins. But including padding, that is to say, the actual clientHeight = the height padding value of the current object's visible area, as shown in the figure below clientHeight = the height of the object's visible area (300) the upper and lower padding values ​​​​(20) = 320

Javascript solutions that are practical in different browsers:

var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

OffsetHeight = height of the current object scroll bar borde value padding value. The height of the current object in the above picture is the same as the height of the visual area, so offsetHeight = 300 padding(20px) border(10px) = 330

ScrollHeight is the actual height of the web page content. The minimum value is clientHeight, which means it can be equal to clientHeight. But let us assume such a situation. As shown in the following code, the height of the parent div is 300px and the height of the child div is 500px. At this time, a scroll bar will be formed. At this time, the structure diagram of the parent div is as follows:

The scrollHeight of the parent div should be scrollHeight = 500px padding value

Because the scroll bar is generated at this time, the height of the visible area of ​​the parent div is 283, and the current object height is the height of the parent div is 300, so

clientHeight = 283px padding value (20px) = 303px

offsetHeight = height of parent div (300px) padding value (20px) border (10px) = 330px

<div id="parent" style="padding:10px;border:5px red solid;height:300px;width:200px;overflow:auto">
  <div style="height:500px;width:400px"></div>
</div>

The difference between clientTop, offsetTop and scrollTop

To understand clientTop, you can refer to clientHeight. The calculation method of clientHeight is the height of the current visual area plus the padding value. Then clientTop can be understood as the distance from the current visual area to the previous element.

As shown in the picture above, clientTop is 5px. In most cases, clientTop is this border value.

offsetTop is the distance from the current object to the body element. Its calculation method is relatively complicated. Let’s understand it from the above figure first. The current object refers to the area within the border, so calculating offsetTop starts from the margin of the current object. The calculation formula is as follows: offsetTop = margin-top of the current object, margin-top of all superior elements of the current object, border-top of all superior elements of the current object. It should be noted that offsetTop cannot be assigned directly and can only be obtained through this calculation method. .

scrollTop is the distance from the top of the current object to the top edge of the current object within the display range of the current window. That is, when a vertical scroll bar appears, the distance the scroll bar is pulled.

The above is a comparison of the differences between different heights and tops in js. I hope it will be helpful to everyone's learning.