Offsettop refers to the position, integer, and pixel of an element from the top or upper control.
Offsetleft refers to the position, integer, and pixel of the element from the left or upper control.
Offsetwidth refers to the width, integer, and pixel of the element control itself.
Offsetheight refers to the height, integer, and pixel of the element control itself.
Page visible area wide: document.body.clientWidth
Page visible Area High: document.body.clientHeight
Web page Visible area wide: document.body.offsetWidth (including edge width)
Page visible Area High: document.body.offsetHeight (including edge width)
Page body Full text width: document.body.scrollWidth
The full text of the Web page High: document.body.scrollHeight
Web pages are rolled up high: Document.body.scrollTop
Pages were rolled away to the left: Document.body.scrollLeft
Web page body part: 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 workspace width: window.screen.availWidth
Here are four kinds of browsers that explain the ClientHeight, offsetheight and scrollheight of Document.body.
These four types of browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).
clientheight
The four browsers have no objection to the interpretation of ClientHeight, which is considered to be the height of the content viewable area, that is, the height of the area of the content can be seen in the page browser, it is generally the last tool bar below to the status bar of this 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
introduce：
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're 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 caused by different interpretations of the document.body, not because of the Offset to explain the difference caused), click here to view the different points.
title: The difference between offsettop and Style.top
Preparatory knowledge: offsettop, Offsetleft, offsetwidth, offsetheight
We know that offsettop can get the position of the HTML element distance above or the outer element, Style.top is also OK, the difference is:
One, offsettop return is 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.
Third, if the HTML element has not been specified with the top style, then Style.top returns an empty string.
The same is true of Offsetleft and Style.left, offsetwidth and Style.width, Offsetheight and Style.height.
Title: ClientHeight, Offsetheight and ScrollHeight
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).
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 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.
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 the volume, example:
<div class= "Width:100px;height:100px;background-color: #FF0000; overflow:hidden;" id= "P" >
<div class= "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 = 10;
</script>
Because ScrollTop is set for the outer element p, the inner elements are rolled up.
ScrollLeft is a similar principle.
We already know that offsetheight is the width of its own element.
The scrollheight is the absolute width of the inner element and contains the hidden parts of the inner element.
The scrollheight of p in the above is 300, while P's offsetheight is 100.
ScrollWidth is a similar principle.
IE and FireFox are fully supported, while Netscape and Opera do not support ScrollTop, scrollleft (except Document.body).
Title: offsettop, Offsetleft, offsetwidth, offsetheight
4, ClientLeft
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 been to offsetleft,offsettop,scrollleft,scrolltop these several methods are very confused, spent a day to learn a good time. The following results are obtained:
1.offsetTop:
The distance from the current object to the top of its parent layer.
It cannot be assigned. 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.
It cannot be assigned. Set 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 with 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
4.offsetHeight:
The difference with the Style.height property is that if the width setting of an object is a percentage height, the style.height returns this percentage, regardless of whether the page is larger or smaller, and offsetheight returns the height value of the object on different pages instead of the percent value
5.offsetParent:
The ancestor layer object of the current object.
Note. If the object is included in a Div, this div is not considered to be 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.
Using this property, you can get the absolute position of the current object in a different size page.
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
