JS in offsettop, ClientTop, scrolltop, offsettop each attribute introduction

This is the common property of JavaScript that makes scrolling code

Page Visible area width: document.body.clientWidth;
Web page Visible Area High: document.body.clientHeight;
Web page Visible Area width: document.body.offsetWidth (including the width of the edge);
Web page Visible Area High: document.body.offsetHeight (including the width of the edge);
Page body Full text width: document.body.scrollWidth;
Page body Full text High: document.body.scrollHeight;
The page was rolled High: document.body.scrollTop;
The webpage is rolled away left: document.body.scrollLeft;
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 working area height: window.screen.availHeight;

1, Offsetleft

Assume that obj is an HTML control.

Obj.offsettop refers to the position of obj above or above the control, integral type, in pixels.

Obj.offsetleft refers to the position of obj from the left or upper control, the integer type, in pixels.

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

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

We describe the above and above 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 is the distance of the submit button from the top of the tool layer, because the top border of the tool layer is closest to it.

The OffsetTop of the reset button is the distance of the reset button from the top of the tool layer, because the top border of the tool layer is closest to it.

The offsetleft of the Submit button is the distance of the submit button from the left border of the tool layer, because the left border of the tool layer is closest to the left of the toolbar.

The offsetleft of the reset button refers to the distance from the right border of the submit button to the Reset button, because the right border of the submit button is closest to the left of it.

The above properties are also available in FireFox.

Also: What we're talking about here is the property value of the HTML control, not the value of the document.body,document.body is interpreted differently in different browsers (in fact most environments are caused by different interpretations of document.body, not because Offset to explain the difference), click here to see the different points.

Title: The difference between OffsetTop and style.top

Preliminary knowledge: OffsetTop, Offsetleft, offsetwidth, offsetheight

We know that OffsetTop can get the position of the HTML element from above or outside the element, and Style.top is also possible, the difference is:

First, OFFSETTOP returns 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.

If the top style is not specified for the HTML element, Style.top returns an empty string.

Offsetleft and Style.left, offsetwidth and Style.width, offsetheight and Style.height are the same.

Title: ClientHeight, Offsetheight and ScrollHeight

Here we say four kinds of browsers to Document.body's clientheight, offsetheight and scrollheight explanation, here is document.body, if it is HTML control, then there are different, click here to see.

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

2, ClientHeight

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 that scrollheight is the height of the Web content, but the minimum value is clientheight.

To put it simply

ClientHeight is the height of the area through which the content is viewed by the browser.

NS, FF think Offsetheight and scrollheight are Web content height, but when the content height of the page is less than or equal to ClientHeight, scrollheight value is clientheight, and offsetheight Can be less than clientheight.

IE, Opera thinks offsetheight is the visible area clientheight scroll bar and border. ScrollHeight is the actual height of the Web content.

Similarly

The explanations of clientwidth, offsetwidth and ScrollWidth are the same as above, just change the height to width.

But

FF has different interpretations of clientheight in different DOCTYPE, and the XHTML 1 trasitional is not explained above. This issue does not exist with other browsers.

Title: ScrollTop, ScrollLeft, ScrollWidth, scrollheight

3, ScrollLeft

ScrollTop is the "volume" Height value, 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 = 10;

</script>

Because ScrollTop is set for the outer element p, the inner element is rolled up.

ScrollLeft is a similar truth.

We already know that offsetheight is the width of its own elements.

The scrollheight is the absolute width of the inner element, which contains the hidden part of the inner element.

The scrollheight of p above is 300, while P's offsetheight is 100.

ScrollWidth is a similar truth.

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

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 very confused, spent a day of time to study well. The following results are obtained:

1.offsetTop:

The distance from the current object to the top of its parent layer.

It 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.

It cannot be assigned a value. Set the distance of the object to the left of the page use the Style.left property.

3.offsetWidth:

The width of the current object.

The difference from the Style.width property is that if the width of the object is set to a percentage width, Style.width returns this percentage regardless of whether the page is larger or smaller, and offsetwidth returns the width value of the object in different pages instead of the percent value

4.offsetHeight:

The difference from the Style.height property is that if the width of the object is set to a percentage height, Style.height returns this percentage regardless of whether the page is larger or smaller, and offsetheight returns the height value of the object in different pages instead of the percent value

5.offsetParent:

The parent-level object of the current object.

Note. If the object is included in a Div, this div will not be treated as a parent layer of this object (that is, the parent layer of the object skips the Div object), and the parent layer is table when there is no problem.

With this property, you can get the absolute position of the current object in a different size page.

Get absolute Location 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

One obj = obj.offsetparent;

12}

13

Alert ("Left are:" + Left + "\ r \ n" + "Top is:" + top);

15}

6.scrollLeft:

The distance from the leftmost object to the left of the object in the range that the current window displays.

That is, in the case of a horizontal scroll bar, the distance that the scrollbar pulls.

7.scrollTop

The distance from the topmost object to the top edge of the object in the range that the current window displays.

That is, the distance that the scrollbar pulls, in the case of a vertical scroll bar.

Here we say four kinds of browsers to Document.body's clientheight, offsetheight and scrollheight explanation, here is document.body, if it is HTML control, then there are different, click here to see.

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

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 that scrollheight is the height of the Web content, but the minimum value is clientheight.

To put it simply

ClientHeight is the height of the area through which the content is viewed by the browser.

NS, FF think Offsetheight and scrollheight are Web content height, but when the content height of the page is less than or equal to ClientHeight, scrollheight value is clientheight, and offsetheight Can be less than clientheight.

IE, Opera thinks offsetheight is the visible area clientheight scroll bar and border. ScrollHeight is the actual height of the Web content.

Similarly

The explanations of clientwidth, offsetwidth and ScrollWidth are the same as above, just change the height to width.