How to use javascript offset, client, and scroll

 
OffsetTop refers to the position of the element above or upper-layer control, which is an integer in pixels.
OffsetLeft refers to the position of the element between the left side and the upper-layer control. It is an integer in pixels.
OffsetWidth refers to the width, integer, and unit pixel of the element control.
OffsetHeight refers to the height, integer, and unit pixel of the element control.
Visible area width of the webpage: document. body. clientWidth
Visible area height: document. body. clientHeight
Visible area width of the webpage: document. body. offsetWidth (including the width of the edge)
Visible area height of the webpage: document. body. offsetHeight (including the width of the edge)
Webpage text width: document. body. scrollWidth
Webpage text height: document. body. scrollHeight
The height of the page to be rolled: document. body. scrollTop
Left: document. body. scrollLeft
Page body: window. screenTop
Page body part left: window. screenLeft
Screen Resolution height: window. screen. height
Screen Resolution width: window. screen. width
Available screen workspace Height: window. screen. availHeight
Available workspace width: window. screen. availWidth
Here are the explanations of the four browsers on clientHeight, offsetHeight, and scrollHeight of document. body.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox ).

ClientHeight
The four browsers have no objection to the clientHeight interpretation. They all regard the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.

OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.

ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the content height of a webpage, but the minimum value is clientHeight.

Introduction:
1. offsetLeft
Assume that obj is an HTML control.
Obj. offsetTop refers to the position of the obj control above or upper layer. It is an integer in pixels.
Obj. offsetLeft refers to the position of the obj control on the left or upper layer. It is an integer in pixels.
Obj. offsetWidth refers to the width, integer, and unit pixel of the obj control.
Obj. offsetHeight refers to the height, integer, and unit pixel of the obj control.
We will describe the "top or upper layer" and "Left or upper layer" controls mentioned above.

For example:
<Div id = "tool">
<Input type = "button" value = "Submit">
<Input type = "button" value = "reset">
</Div>
The "Submit" button's offsetTop refers to the distance between the "Submit" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.
The offsetTop of the "reset" button refers to the distance between the "reset" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.
The "Submit" button's offsetLeft refers to the distance between the "Submit" button and the left border of the "tool" layer, because the left border closest to the left is the "tool" layer.
The "reset" button's offsetLeft refers to the distance between the "reset" button and the right border of the "Submit" button, because the right border closest to the left is the "Submit" button.
The preceding attributes are also valid in FireFox.
In addition, what we refer to here refers to the attribute value of the HTML control, not document. body, document. body values have different interpretations in different browsers (in fact, most environments are due to document. the reason why the body interpretation is different is not because the offset interpretation is different). Click here to view the differences.

Title: differences between offsetTop and style. top
Prerequisites: offsetTop, offsetLeft, offsetWidth, and offsetHeight
We know that offsetTop can obtain the position of the HTML element above or outside the element, and style. top is also acceptable. The difference between the two is:
1. offsetTop returns numbers, while style. top returns strings. In addition to numbers, it also has the unit: px.
Ii. offsetTop read-only, while style. top can be read and written.
3. If the top style is not specified for the HTML element, style. top returns an empty string.
OffsetLeft, style. left, offsetWidth, style. width, offsetHeight, and style. height are the same principles.
Title: clientHeight, offsetHeight, and scrollHeight
Here we will talk about four types of browsers for document. the clientHeight, offsetHeight, and scrollHeight of the body. Here we are talking about document. body. If it is an HTML control, it is different. Click here to view details.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox ).

2. clientHeight
ClientHeight
Everyone has no objection to clientHeight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.
OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.
ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the height of the webpage content, but the minimum value is clientHeight.
Simply put
ClientHeight is the height of the area where the content is viewed through the browser.
NS and FF hold that both offsetHeight and scrollHeight are the content height of the webpage. However, when the content height of the webpage is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while the value of offsetHeight can be less than clientHeight.
IE and Opera hold that offsetHeight is the clientHeight scroll bar and border in the visible area. ScrollHeight indicates the actual height of the webpage content.
Likewise
The description of clientWidth, offsetWidth, and scrollWidth is the same as above. You only need to change the height to the width.
However
FF has different interpretations of clientHeight in different DOCTYPE, but not in xhtml 1 trasitional. This problem does not exist in other browsers.
Title: scrollTop, scrollLeft, scrollWidth, scrollHeight

3. scrollLeft
ScrollTop is the height of a volume. For 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, these contents may not be completely 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 will roll.
ScrollLeft is similar.
We already know that offsetHeight is the width of its own element.
ScrollHeight is the absolute width of the internal element, which contains the hidden part of the internal element.
In the preceding example, the scrollHeight of p is 300, and the offsetHeight of p is 100.
ScrollWidth is similar.
IE and FireFox are fully supported, whereas Netscape and Opera do not support scrollTop and scrollLeft (except document. body ).
Title: offsetTop, offsetLeft, offsetWidth, and offsetHeight

4. clientLeft
Returns the distance between the offsetLeft property value of the object and the actual value on the left of the current window. It can be understood as the border length.
The methods of offsetLeft, offsetTop, scrollLeft, and scrollTop have been very confusing for a long time. It takes a day to learn about them and the following results are obtained:
1. offsetTop:
The distance from the current object to the top of the upper layer.
You cannot assign a value to the object. Use the style. top attribute to set the distance from the object to the top of the page.

2. offsetLeft:
The distance from the current object to the left of its upper layer.
You cannot assign a value to the object. Use the style. left attribute to set the distance from the object to the left of the page.

3. offsetWidth:
The width of the current object.
And style. the difference between the width attribute is that, for example, if the width of an object is set to the percentage width, the style is displayed regardless of whether the page is larger or smaller. both width return this percentage, while offsetWidth returns the width value of the object in different pages instead of the percentage value.

4. offsetHeight:
And style. the difference between the height attribute is that, for example, if the object width is set to the percentage height, the style is displayed regardless of whether the page is larger or smaller. height returns this percentage, while offsetHeight returns the object height value on different pages, instead of the percentage value.

5. offsetParent:
The upper-level 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 parent layer of the object will skip the DIV object) when the upper layer is a Table, no problem occurs.
This attribute can be used to obtain the absolute position of the current object on pages of different sizes.
Obtain the absolute position script code.
Copy codeThe Code is 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 Is:" + left + "\ r \ n" + "Top Is:" + top );
}


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

7. scrollTop
The distance from the top of the object to the top edge of the object in the range displayed in the current window.
That is, the distance pulled by the scroll bar when a vertical scroll bar appears.
Here we will talk about four types of browsers for document. the clientHeight, offsetHeight, and scrollHeight of the body. Here we are talking about document. body. If it is an HTML control, it is different. Click here to view details.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox ).

ClientHeight
Everyone has no objection to clientHeight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.

OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.

ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the height of the webpage content, but the minimum value is clientHeight.

Simply put
ClientHeight is the height of the area where the content is viewed through the browser.
NS and FF hold that both offsetHeight and scrollHeight are the content height of the webpage. However, when the content height of the webpage is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while the value of offsetHeight can be less than clientHeight.
IE and Opera hold that offsetHeight is the clientHeight scroll bar and