The difference between Offsettop/offsetheight scrolltop/scrollheight

Offsettop/offsetheight Scrolltop/scrollheight These properties troubled me n long, this time must be done.

Assume that obj is an HTML control.

Obj.offsettop the position, integer, or pixel of the control above or above the obj distance.

Obj.offsetheight the height of obj itself, Integer, unit pixels.

OffsetTop can get the position of the HTML element from above or outside the element,Style.top is also possible, the difference is:

First, OFFSETTOP returns a number, and Style.top returns a string, in addition to the number of units: px.
Second, OffsetTop read only, and Style.top can read and write.
If the top style is not specified for the HTML element, Style.top returns an empty string.

scrolltop is the "volume" Height value, example:
<div style= "Width:100px;height:100px;overflow:hidden;" id= "P" >
<div style= "width:50px;height:300px;" id= "T" > If scrolltop is set for p, the content may not be fully displayed. </div>
</div>
<script type= "Text/javascript" >
var p = document.getElementById ("P");
P.scrolltop = 10;
</script>
Because ScrollTop is set for the outer element p, the inner element is rolled up.

ScrollHeight and Offsetheight

Offsetheight is the height of its own elements, scrollheight is the height of its own elements + the heights of hidden elements (is it possible to understand the offsetheight value of an inner element??? )。

<div id= "Container" style= "width:100px; height:100px; Overflow:auto; " >

<p style= "height:250px; ">
Don't be a lover, be a cat, be a dog, be a lover, be a pet, at least cute and charming, and you'll be hated tomorrow.
</p>
</div>
<script>
Alert (document.getElementById ("container"). offsetheight);
Alert (document.getElementById ("container"). scrollheight);
</script>

100,250 will be output sequentially. Because the height of the element has been specified as 100px, so the offsetheight is always 100px, the inner element is 250px, and the container element is only 100px, then there is 150px content it can not be displayed, but it is actually exist, So the scrollheight value is 100+150=250.

Ext.: HTTP://HI.BAIDU.COM/LAMPERS/ITEM/1605ADC13DAA00350931C6FC

Http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html

Alert ("width of the visible area of the page:" + ' document.body.clientWidth. +document.body.clientWidth); Alert ("Page visible Area High:" + ' document.body.clientHeight. ' +document.body.clientHeight); Alert ("The visible area of the page is high (including the width of the edge):" + ' document.body.offsetWidth. ' +document.body.offsetWidth); Alert ("The visible area of the page is high (including the height of the edge):" + ' document.body.offsetHeight. ' +document.body.offsetHeight); Alert ("Page body Full text width:" + ' document.body.scrollWidth. ' +document.body.scrollWidth); Alert ("Page body Full text High:" + ' document.body.scrollHeight. ' +document.body.scrollHeight); Alert ("The page was rolled High:" + ' document.body.scrollTop. ' +Document.body.scrollTop); Alert ("The webpage was rolled away left:" + ' document.body.scrollLeft. ' +document.body.scrollLeft); Alert ("On the body part of the webpage:" + "window.screentop." +window.screentop); Alert ("Page body part left:" + "window.screenleft." +window.screenleft); Alert ("High screen resolution:" + "window.screen.height." +window.screen.height); Alert ("Width of screen resolution:" + "window.screen.width." +window.screen.width); Alert ("Screen available Workspace height:" + "window.screen.availHeight." +window.screen.availHeight); Alert ("Screen Available workspace width:" + "window.screen.availWidth." +window.screen.availwidth);

View Code

Offsettop/offsetheight scrolltop/scrollheight The difference