Comparison of height and top in js

Comparison of height and top in js

Every time I see clientHeight (clientTop), offsetHeight (offsetTop), and scrollHeight (scrollTop) in js, the difference between them is big, and I cannot tell the differences between them. However, it is no longer worth one or two times, then you need to check the differences to determine which one to use.

Today, I spent a little time sorting out their differences. This article is mainly based on chrome. There may be some differences between browsers, but it is not clear that many of them have not met yet, after encountering a similar compatibility problem, record it here. This time, we will record the differences between various properties in chrome browser to facilitate future viewing.

What is the difference between clientHeight, offsetHeight, and scrollHeight?

ClientHeight is basically the same in each browser. It is regarded as the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, excluding the scroll bar and margin, but it includes padding, that is, the actual clientHeight = height of the visible area of the current object + padding value, as shown in clientHeight = height of the visible area of the object (300) + upper and lower padding value (20) = 320

A Practical javascript solution for different browsers:

Var w = document.doc umentElement. clientWidth | document. body. clientWidth;
Var h = document.doc umentElement. clientHeight | document. body. clientHeight;

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

ScrollHeight is the actual height of the webpage content, and the minimum value is clientHeight. That is to say, it can be the same as clientHeight. But let's assume that, as shown in the following code, the parent div height is PX, the height of the sub-div is 500px, and a scroll bar is formed. The structure of the parent div is as follows:

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

Because a scroll bar is generated at this time, the visible area height of the parent div is 283, and the height of the current object, that is, the height of the parent div is 300. Therefore, clientHeight = 283px + padding value (20px) = 303px

OffsetHeight = parent div height (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>

What is the difference between clientTop, offsetTop, and scrollTop?

For more information about clientTop, see clientHeight. clientHeight calculates the height of the current visible area and the padding value. Therefore, clientTop can be understood as the distance from the current visible area to the upper-level element.

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

OffsetTop is the distance from the current object to the body element. Its calculation method is relatively complex. First, we will understand that the current object refers to the area within the border of border, therefore, the calculation of 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 upper-level elements of the current object + border-top of all upper-level elements of the current object, note that offsetTop cannot be directly assigned. It can only be obtained through this calculation method.

ScrollTop is the distance between the top edge of the current object and the top edge of the current object in the range displayed in the current window, that is, the distance pulled by the scroll bar when a vertical scroll bar appears.