The properties of offsetTop, clientTop, scrollTop, offsetTop in the JS

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Here is the common property of the scroll the code in JavaScript

The visible region wide.: document.body.clientWidth;
Webpage visible area high: document.body.clientHeight;
Webpage visible area width: document.body.offsetWidth (including line width);
Webpage visible area high: document.body.offsetHeight (including line width);
Quan Wenkuan Webpage text: document.body.scrollWidth;
The main text Webpage high: document.body.scrollHeight;
Webpage is rolled to high: document.body.scrollTop;
Webpage is rolled to the left: document.body.scrollLeft;
Webpage body part.: window.screenTop;
Webpage text left: window.screenLeft;
The high screen resolution: window.screen.height;
The wide screen resolution: window.screen.width;
Screen available working height: window.screen.availHeight;



1, offsetLeft

If obj is a HTML control.

Obj.offsetTop refers to the obj distance above or upper control position, integer, the unit pixel.

Obj.offsetLeft refers to the obj distance left or upper control position, integer, the unit pixel.

Obj.offsetWidth refers to obj controls its width, int, the unit pixel.

Obj.offsetHeight refers to the obj control of their height, integer, the unit pixel.

We mentioned above the "or the" and "left or upper" controls explain.

For example:

<div id="tool">

<input type="button" value="Submit">

<input type="button" value="Reset">

</div>

"Submit "button offsetTop refers to the" submit "button from the" tool "layer frame distance, because from the above is the latest" tool "layer.

"Reset "button offsetTop refers to" reset "button from the" tool "layer frame distance, because from the above is the latest" tool "layer.

"Submit "button offsetLeft refers to the" submit "button from the" tool "layer of the left border of the distance from the left, because recently is the" tool "layer of the left border.

"Reset "button offsetLeft refers to" reset "button from the" submit "button to the right border of the distance from the left, because the recent is the" submit "button to the right border.

The above property is also valid in FireFox.

Another: we here refers to the control's HTML property value, Not document.body, Document.body values are different interpretations in different browsers (in fact most environment is caused due to the differences of document.body interpretation, Not because of different causes on offset interpretation), Click here to view different point.

Title: the difference between offsetTop and style.top

Preliminary knowledge: offsetTop, offsetLeft, offsetWidth, offsetHeight

We know that offsetTop can get HTML elements or the outer distance above the position of elements, style.top is also possible, is the difference between the two:

A, offsetTop returns is digital, and style.top returns a string, except figures with unit: px.

Two, the offsetTop read-only, while style.top read and write.

Three, if not for the HTML element specifies the top style, style.top returns the empty string.

OffsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height is the same reason.

Title: clientHeight, offsetHeight and scrollHeight

We're here to talk about four kinds of browser for document.body clientHeight, offsetHeight and scrollHeight, said here is document.body, if HTML controls, and there are different, click here to view.

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

2, clientHeight

clientHeight

Everybody does not have what objection to clientHeight, that is the content of visual zone height, that is to say page browser can be seen in this area content height, is generally the last bar below the status bar above the region, has no concern with the page content.

offsetHeight

IE, Opera thinks that offsetHeight = clientHeight + scroll bar + frame.

NS, FF thinks that offsetHeight is Webpage actual height, can be less than clientHeight.

scrollHeight

IE, Opera thinks that scrollHeight is Webpage actual height, can be less than clientHeight.

NS, FF thinks that scrollHeight is Webpage content height, but the minimum value is clientHeight.

Simply say

ClientHeight is through the browser to see the content of the regional high.

NS, FF think that offsetHeight and scrollHeight are Webpage content height, But when the Webpage content height is less than or equal to clientHeight, The value of scrollHeight is clientHeight, While offsetHeight can be less than clientHeight.

IE, Opera thinks that offsetHeight is visual area clientHeight scroll bar frame. ScrollHeight is the actual height of Webpage content.

Similarly

clientWidth, Explain the offsetWidth and scrollWidth the same as above, only the height width can be replaced.

But

FF is different in different DOCTYPE interpretation of clientHeight, XHTML 1 trasitional is not interpreted as above. Other browsers do not have this problem.

Title: scrollTop, scrollLeft, scrollWidth, scrollHeight

3, scrollLeft

ScrollTop is the "volume" of the height value, sample:

<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 to P, the content may not be fully display. </div>

</div>

<script type="text/javascript">

var p = document.getElementById("p");

p.scrollTop = 10;

</script>

Because the scrollTop is set to the outer element of P, so the inner elements acock.

ScrollLeft is also similarly.

We already know that the offsetHeight is the width of the element.

And scrollHeight is the absolute width of internal elements, the hidden part contains internal elements.

The P scrollHeight 300, P offsetHeight 100.

ScrollWidth is also similarly.

IE and FireFox fully support, while Netscape and Opera do not support scrollTop, scrollLeft (except document.body).

Published time: 2007-10-15 20:20:16

Title: offsetTop, offsetLeft, offsetWidth, offsetHeight

4, clientLeft 

The offsetLeft property returns the object's value and to the current window on the left side of the real value of the distance, can be understood as the length of the frame

Since the offsetLeft, offsetTop, scrollLeft, scrollTop which is confused, spent a day to learn it. Get the following results:

1.offsetTop    :

The current object to the top of the upper layer distance.

Cannot assign to it. Set the object to the top of the page distance please use the style.top attribute.

2.offsetLeft :

The current object to its upper layer left distance.

Cannot assign to it. Set the object to the page left distance please use the style.left attribute.

3.offsetWidth :

The current object width.

And the difference between the style.width attribute: such as the object's width set values for the percentage of width, and whether the page bigger or smaller, style.width returns the percentage, and offsetWidth returns the object in a different page width value rather than a percentage value

4.offsetHeight :

And the difference between the style.height attribute: such as the object's width set values for the percentage of height, whether the page bigger or smaller, style.height returns the percentage, and offsetHeight returns the object in a different page height value rather than a percentage value

5.offsetParent  :

The higher layer object for the current object.

Note. If the object is included in a DIV, the DIV is not to be regarded as the higher layers of the object (i.e. the higher layer, the object will skip the DIV object) the higher layer is not Table when there is a problem.

Using this property, can obtain the absolute position of the object in different size in the page.

To get the absolute position of script code

1function GetPosition(obj)

2{

3 var left = 0;

4 var top  = 0;

5

6 while(obj != document.body)

7 {

8       left = obj.offsetLeft;

9       top  = obj.offsetTop;

10

11       obj = obj.offsetParent;

12 }

13

14 alert("Left Is : " + left + "\r\n" + "Top  Is : " + top);

15}

6.scrollLeft :

The object to the object on the left side of the window shows the range in the distance.

That is in the horizontal scroll bar scroll case, pull the distance.

7.scrollTop

The top object to object in the scope of the current window is displayed within the top edge distance.

That is in the vertical scroll bar scroll case, pull the distance.

We're here to talk about four kinds of browser for document.body clientHeight, offsetHeight and scrollHeight, said here is document.body, if HTML controls, and there are different, click here to view.

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

clientHeight

Everybody does not have what objection to clientHeight, that is the content of visual zone height, that is to say page browser can be seen in this area content height, is generally the last bar below the status bar above the region, has no concern with the page content.

offsetHeight

IE, Opera thinks that offsetHeight = clientHeight + scroll bar + frame.

NS, FF thinks that offsetHeight is Webpage actual height, can be less than clientHeight.

scrollHeight

IE, Opera thinks that scrollHeight is Webpage actual height, can be less than clientHeight.

NS, FF thinks that scrollHeight is Webpage content height, but the minimum value is clientHeight.

Simply say

ClientHeight is through the browser to see the content of the regional high.

NS, FF think that offsetHeight and scrollHeight are Webpage content height, But when the Webpage content height is less than or equal to clientHeight, The value of scrollHeight is clientHeight, While offsetHeight can be less than clientHeight.

IE, Opera thinks that offsetHeight is visual area clientHeight scroll bar frame. ScrollHeight is the actual height of Webpage content.

Similarly

clientWidth, Explain the offsetWidth and scrollWidth the same as above, only the height width can be replaced.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Fabian at August 06, 2014 - 9:42 PM