Height, clientheight, scrollheight, offsetheight difference

1.top

This property is only available when the object's positioning (position) property is set. Otherwise, this property setting is ignored.

Copy CodeThe code is as follows:
<div style= "background-color:red; Position:absolute; width:100px; height:100px; " >
<p style= "Position:absolute; top:-5px; " > Test top</p>
</div>

Above is a paragraph p contained within a DIV, you can see the top of P is set to -5px, its top margin exceeds the top margin of the container div, the distance is set 5px.

It should be noted that the DIV and P, the pair of containing elements, need to set position to absolute to get the desired result, if the parent element is not set, then the child element will be a reference to the upper layer defined position elements, until the entire document;

2.posTop

The value of postop is actually the same as top, but the difference is that the top is fixed with an element of PX, and postop is just a numeric value, generally using postop to perform the operation.

3.scrollTop

Copy CodeThe code is as follows:
<div id= "Container" style= "width:100px; height:100px; Overflow:auto; " >
<p style= "" mce_style= "" >
Here is the text
</p>
</div>
<script type= "Text/javascript" ><!--
Container.scrolltop = 12;
--></script>

This section of text in this 100*100 div can not be fully displayed, so set the overflow for auto, it will appear in a downward direction of the sliding box, if not set Id.scrolltop property, the default slide block position at the top. When the ScrollTop value is set to 12, the position of the slider changes, and the default display is the text that has been rolled over 12 pixels. If you set overflow to hidden, you will not be able to display the top 12-pixel text.

Note that the Setup method is Id.scrolltop, not id.style.scrollTop.

4.offsetTop

If element A is the body element of HTML, its display property evaluates to none, or does not have a CSS layout box, returns 0, and stops the algorithm.

If the offsetParent of element A is null or is the BODY element of HTML, returns the vertical distance of the top border of element A from the canvas origin in CSS pixels, and stops the algorithm.

Returns the distance, in CSS pixels, of the top border of element A from its offsetParent.

5. ScrollHeight and Offsetheight and clientheight

For Document.body

ClientHeight
Everyone has no objection to the clientheight, are considered to be the height of the content viewable area, that is, the page browser can see the content of the height of the area, is generally the last toolbar below the status bar above the area, not related to the content of the page.

Offsetheight
IE, Opera thinks offsetheight = clientheight + scroll bar + border.
NS, FF think offsetheight is the actual height of the Web content, can be less than clientheight.

ScrollHeight
IE, Opera think ScrollHeight is the actual height of the Web content, can be less than clientheight.
NS, FF thinks scrollheight is the height of the Web content, but the minimum value is clientheight

For an HTML control

Offsetheight is the height of its own element, and ScrollHeight is the height of its own elements + hidden elements.

Copy CodeThe code is as follows:
<div id= "Container" style= "width:100px; height:100px; Overflow:auto; " >
<p style= "height:250px; ">
Don't be a lover, a cat, a dog, not a lover, a pet, at least cute and charming, and you're not going to be the one to be hated tomorrow </p>
</div>
<script type= "Text/javascript" ><!--
alert (container.offsetheight);
alert (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.

Second article

Let's implement the OnClick event in test

function Justatest ()
{
var test= document.getelementbyid ("test");
var Test2=document.getelementbyid ("Test2")
var Test3=document.getelementbyid ("Test3")
var Test4=document.getelementbyid ("Test4");
alert (test4.style.height);
alert (test3.style.height);
Alert (test2.style.height)
alert (test.style.height);
Alert (document.body.style.height)
}

Height: Actually height is a bit different from other heights, in JavaScript it is a member of the object's Style object property, its value is one character type, and the other three height values are of type int, They are properties of the object. So this document.body.height will prompt undenifine, and must be written document.body.style.height
The above script will pop up in turn 700px,550px,600px,500px,1000px.height is the simplest, do not have to consider whether there are scroll bars and borders and so on. So it's not a long explanation.
Then we'll replace the script

function Justatest ()
{
var test= document.getelementbyid ("test");
var Test2=document.getelementbyid ("Test2")
var Test3=document.getelementbyid ("Test3")
var Test4=document.getelementbyid ("Test4");
alert (test4.clientheight);
alert (test3.clientheight);
Alert (test2.clientheight)
alert (test.clientheight);
Alert (document.body.clientHeight)
}

After running Firefox, the result is: 700,550,583,483,1000
The result of IE is: 700, 550,583,483,1000
IE and Firefox running results are consistent. Here's a look at the definition of clientheight.
ClientHeight: The width of the visible area, not including the width of the boder, if the area with a scrollbar, you should also subtract the height of the horizontal scroll bar is not available, the normal 17px, is actually the scrollable part of the scroll bar, In fact, clientheight and height, if not with a scroll bar, their values are the same, if with a scroll bar will be less than the height value of 17px; Firefox and IE are consistent.
Then we'll see scrollheight.

function Justatest ()
{
var test= document.getelementbyid ("test");
var Test2=document.getelementbyid ("Test2")
var Test3=document.getelementbyid ("Test3")
var Test4=document.getelementbyid ("Test4");
alert (test4.scrollheight);
alert (test3.scrollheight);
Alert (test2.scrollheight)
alert (test.scrollheight);
Alert (document.body.scrollHeight)
}

After running Firefox, the result is: 700,552,700,602,1002
The results of IE are: 15, 15, 700,602, 552
ScrollHeight: This property is more troublesome, because they are so much worse than Firefox and IE.
Under the Firefox also very good understanding, it is actually the scroll bar scrollable part also to add boder height also to add the horizontal scroll bar is not available height, compared with the clientheight, multiple border height with the horizontal scroll bar is not available height.

The scrollheight in IE refers to the height of the object it contains and the height of the boder and the marging, if it contains no object or the height value of the object is not set, then its value will be 15
Finally, let's see offsetheight.

function Justatest ()
{
var test= document.getelementbyid ("test");
var Test2=document.getelementbyid ("Test2")
var Test3=document.getelementbyid ("Test3")
var Test4=document.getelementbyid ("Test4");
alert (test4.offsetheight);
alert (test3.offsetheight);
Alert (test2.offsetheight)
alert (test.offsetheight);
Alert (document.body.offsetHeight)
}

Offsetheight:
ff:700,552,602,502,1002
ie:700,552,602,502,1002
This property is good to do, because in the test, ie with the results of Firefox is the same, it is the height of their own, if there is set Boder words should also add Boder value, because in addition to test4 this Div, the other Div have set border=1px, so 552=550+2, The others are the same.

Hey, in summary, the difference between clientheight and height is that if there is a scrollbar should be subtracted from the 17px of the scrollbar, the difference between offsetheight and height is to increase the height of boder, SCROLLHEIHGT and height is the difference between Firefox and offsetheight consistent, ie under the above mentioned.

Believe you understand this, to Width,clientwidth,scrollwidth,offsetwidth is no stranger to it, but one is the long one is wide problem.

Height, clientheight, scrollheight, offsetheight difference