JS in different height, top of the difference between the basic knowledge

Each time I see JS in the ClientHeight (ClientTop), offsetheight (offsettop), ScrollHeight (scrolltop) on the head of the big, and can not distinguish between these kinds of differences, but encountered these are not worth one or two times, Then each time you have to look at their differences to decide which to use.

This article is mainly based on chrome, there may be some differences between browsers, but many of them have not really met, is not very clear, and so later encountered similar compatibility issues, and then recorded here, this time on the Chrome browser in the different attributes of the difference to make a record, to facilitate the future view

The difference between a clientheight,offsetheight,scrollheight

ClientHeight is basically the same in every browser, and is considered to be the height of the content viewable area, which means that the height of this area of content can be seen in the page browser, excluding scrollbars, excluding margin, but including padding, In other words, the actual clientheight = the height + padding value of the current object's viewable area, as shown in the following figure ClientHeight = object Visual Region height (300) + upper and lower padding value (20) = 320

JavaScript scenarios that are useful in different browsers:

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

Offsetheight = The height of the current object + scroll bar + Borde value + padding value, the height of the current object in the above image is the same as the height of the visual region, so offsetheight = + padding (20px) + border (10px ) = 330

ScrollHeight is the actual height of the content of the Web page, the minimum value is clientheight, that is, it can be equal to clientheight, but we assume that a situation like this, the parent div height is 300px, the sub div height is 500px, This is where the scroll bar is formed, and the parent Div is structured as follows:

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

Because the scroll bar is generated at this time, the parent div has a visual region height of 283, and the current object height, which is the height of the parent Div, is 300, so

clientheight = 283px + padding value (20px) = 303px

offsetheight = parent div's 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>

The difference between two clienttop,offsettop,scrolltop

ClientTop's understanding can refer to Clientheight,clientheight's calculation as the height of the current viewable region plus the padding value, so clienttop can be understood as the distance from the current viewable region to the upper level element.

As shown in the figure above, ClientTop is 5px, and in most cases clienttop is the border value.

Offsettop is the current object to the BODY element distance, it is relatively complex calculation method, first from the above figure to understand that the current object refers to the border border within the area, so the calculation offsettop to start from the current object margin, the formula is as follows offsettop = The current object's Margin-top + The current object all the ancestor element Margin-top + The current object All superior element border-top, needs to note that offsettop is cannot carry on the direct assignment, only then obtains by this kind of calculation method.

ScrollTop is the distance from the top of the current object to the top edge of the current object in the range displayed by the current window. That is, when the longitudinal scroll bar appears, the scroll bar pulls the distance.

The above is JS different height, top of the difference between the comparison, I hope to help you learn.