JS in top, ClientTop, scrolltop, offsettop different text detailed description version of the _javascript tips

Web page Visible area wide: document.body.clientWidth;
Page visible Area High: document.body.clientHeight;
Web page Visible area wide: document.body.offsetWidth (including the width of the sideline);
Page visible Area High: document.body.offsetHeight (including the width of the sideline);
Web page Full text width: document.body.scrollWidth;
The full text of the Web page is high: document.body.scrollHeight;
The Web page is rolled up high: document.body.scrollTop;
The pages are rolled away left: document.body.scrollLeft;
The main body part of the Web page: window.screentop;
Page body part left: window.screenleft;
High screen resolution: window.screen.height;
Width of screen resolution: Window.screen.width;
Screen available workspace height: window.screen.availHeight;

Screen available working area width: window.screen.availWidth;

1, Offsetleft

Suppose that obj is an HTML control.

Obj.offsettop refers to the position, integer, and pixel of the obj from the top or upper control.

Obj.offsetleft refers to the position, integer, and pixel of obj from the left or upper control.

Obj.offsetwidth refers to the width, integer, and unit pixel of the obj control itself.

Obj.offsetheight refers to the height, integer, and unit pixel of the obj control itself.

We describe the above or upper and left or upper controls as mentioned above.

For example:
<div id= "Tool" >
<input type= "button" value= "Submit" >
<input type= "button" value= "Reset" >
</div>

The offsettop of the submit button refers to the distance from the top border of the tool layer, because the top edge of the "tool" layer is the closest to the top of the "the".
offsettop of the reset button refers to the distance from the "reset" button to the top border of the tool layer, because the top edge of the "tool" layer is closest to the top.

The offsetleft of the submit button refers to the distance from the left border of the tool layer, because the closest to the left of the "tool" layer is the left border.
Offsetleft of the reset button refers to the distance from the right border of the submit button, because the right border of the submit button is closest to the left of the "reset" button.

The above properties are also valid in FireFox.

also: what we are talking about here is the attribute value of the HTML control, not the Document.body,document.body value in different browsers (in fact, most environments are due to the document.body Explain the difference caused, not because of the difference between the interpretation of offset, click here to see the difference.
title: offsettop differs from Style.top

Preliminary knowledge: offsettop, Offsetleft, offsetwidth, offsetheight

we know that offsettop can get the position of the HTML element from above or the outer element, Style.top is OK, the difference is:

One, offsettop returns a number, and style.top Returns a string with a unit in addition to the number: px.

Two, offsettop is read-only, and style.top can read and write.

Three, if the HTML element has not been specified with the top style, then Style.top returns an empty string. The same applies to

offsetleft and Style.left, offsetwidth and Style.width, offsetheight, and Style.height.
title: ClientHeight, Offsetheight, and scrollheight

We're here to talk about the clientheight of the four browsers to Document.body, Offsetheight and ScrollHeight Explain, here is the document.body, if it is HTML control, then there are different, click here to view.

These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).

2, ClientHeight
ClientHeight
We have no objections to clientheight, are considered to be the height of the content visual area, that is, the page browser can see the content of the height of the area, is generally the last tool bar below to the status bar above the area, and the content of the page is irrelevant.

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

scrollheight
IE, Opera believes that scrollheight is the actual height of the content of the Web page, and can be less than clientheight.
NS, FF thinks scrollheight is the height of the Web page content, but the minimum value is clientheight.

Simply
clientheight is the height of this area of content through the browser .
NS, FF think that both offsetheight and scrollheight are the height of the content of the Web page, except that when the content height of the Web page is less than or equal to ClientHeight, the scrollheight value is clientheight and the Fsetheight can be less than clientheight.
IE, Opera thinks offsetheight is a visual area clientheight scroll bar plus a border. ScrollHeight is the actual height of the Web page content. The

same
clientwidth, offsetwidth, and scrollwidth explanations are the same as above, except that you can change the height to a width.

But
FF has different interpretations of clientheight in different DOCTYPE, which is not explained in XHTML 1 trasitional. This problem does not exist in other browsers.
title: ScrollTop, ScrollLeft, ScrollWidth, scrollheight

3, ScrollLeft
ScrollTop is the height value of "volume"Example:

<div style= "Width:100px;height:100px;background-color: #FF0000; overflow:hidden;" id= "P" >
<div style= "Width:50px;height:300px;background-color: #0000FF;" 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 = ten
</script>

because the scrolltop is set for the outer element p, the inner elements are rolled up. The

scrollleft is similar to the same reason .

We already know   offsetheight is the width of its own element .

and ScrollHeight is the absolute width of the inner element, containing the hidden parts of the inner element.

The scrollheight of p in the above is 300, and P's offsetheight is 100. The

scrollwidth is similar.

IE and FireFox are fully supported, while Netscape and Opera do not support ScrollTop, scrollleft (except Document.body).
Publish time: 2007-10-15 20:20:16
title: offsettop, Offsetleft, offsetwidth, offsetheight

4, clientleft  

The returns the distance between the Offsetleft property value of an object and the true value to the left of the current window, which can be understood as the length of the border

has always been to offsetleft,offsettop,scrollleft, ScrollTop These methods are very confused, spent a day to learn a good time. The following results are obtained:
1.offsetTop    :
The current object's distance from the top of its parent layer.
The cannot be assigned a value. Set the distance of the object to the top of the page use the Style.top property.

2.offsetLeft:
The distance from the current object to the left of its parent layer.
The cannot be assigned a value. Sets the distance of the object to the left part of the page using the Style.left property.

3.offsetWidth:
The width of the current object.
The difference between the and the Style.width property is that if the width setting of the object is a percentage width, the style.width returns this percentage, regardless of whether the page is larger or smaller, and offsetwidth returns the width of the object in different pages instead of the percent value The difference between

4.offsetHeight:
and the Style.height property is that if the width setting of an object is a percentage height, the Style.height returns this percentage whether the page is larger or smaller. Offsetheight returns the height value of the object on different pages instead of the percent value

5.offsetparent  :
The parent layer object of the current object.
note. If the object is included in a Div, this div will not be treated as the parent layer of the object (that is, the object's parent layer skips the Div object). When the parent layer is a table, there is no problem.
uses this property to get the absolute position of the current object in a page of different sizes.
Get absolute Position script code

Copy Code code as follows:

function GetPosition (obj)
{
var left = 0;
var top = 0;
while (obj!= document.body)
{
left = Obj.offsetleft;
top = Obj.offsettop;
obj = obj.offsetparent;
}
Alert ("Left are:" + Left + "\ r \ n" + "Top are:" + top);
}

6.scrollLeft:
The leftmost distance of the object to the left of the object in the range displayed by the current window.
That is, when the horizontal scroll bar appears, the scroll bar pulls the distance.

7.scrollTop
The distance at the top of an object to the top edge of the object in the range displayed by the current window.
That is, when the longitudinal scroll bar appears, the scroll bar pulls the distance.


Here we talk about the explanations of the clientheight, offsetheight, and scrollheight of the four browsers for Document.body, which is document.body, and if it is HTML, then there is a difference, click here to see.

These four types of browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).

ClientHeight
We have no objections to clientheight, are considered to be the height of the content visual area, that is, the page browser can see the content of the height of the area, is generally the last tool bar below to the status bar above the area, and the content of the page is irrelevant.

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

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

To put it simply
ClientHeight is the height of this area of the content through the browser.
NS, FF think Offsetheight and scrollheight are page content height, but when the content height of Web page is less than equal to ClientHeight, scrollheight value is clientheight, and offsetheight Can be less than clientheight.
IE, Opera think Offsetheight is the visual area clientheight scroll bar plus border. ScrollHeight is the actual height of the Web page content.

Similarly
The explanations for clientwidth, offsetwidth and ScrollWidth are the same as the above, except that the height is changed to width.

Description
The above DTD-based HTML 4.01 Transitional, if it is a DTD XHTML 1.0 transitional The meaning is different, in XHTML, these three values are the same value, both represent the actual height of the content. Most new versions of browsers support different interpreters based on the DOCTYPE specified by the page. Download or browse the test file.