Descriptions of offsettop, clienttop, scrolltop, and offsettop attributes in HTML

Precise HTML positioning: scrollleft, scrollwidth, clientwidth, and offsetwidth
Scrollheight: gets the scroll height of an object.
Scrollleft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.
Scrolltop: sets or obtains the distance between the top of the object and the top of the visible content in the window.
Scrollwidth: gets the scroll width of an object.
Offsetheight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute.
Offsetleft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetparent attribute.
Offsettop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsettop attribute.
The horizontal coordinates of event. clientx relative to the document
The vertical coordinates of event. clienty relative to the document
Horizontal coordinates of event. offsetx relative to the container
Event. offsety vertical coordinates of the container
Document.doc umentelement. scrolltop vertical scroll Value
Event.clientxw.document.doc umentelement. The horizontal coordinate of scrolltop relative to the document + The amount of vertical scrolling

This is a common property for building, migrating, and transforming code in JavaScript.
Visible area width: 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 );
Full text width of the webpage: Document. Body. scrollwidth;
Webpage text height: Document. Body. scrollheight;
The height of the page to be rolled: Document. Body. scrolltop;
Left of the webpage to be rolled: Document. Body. scrollleft;
On the webpage Text Project Team: window. screentop;
Webpage text project team left: window. screenleft;
High screen identification rate: window. Screen. height;
Screen discrimination rate width: window. Screen. width;
Available screen workspace Height: window. Screen. availheight;

1. offsetleft

Assume that obj is an HTML control.

OBJ. offsettop refers to the status of the control above the OBJ interval or the upper layer. It is an integer in pixels.

OBJ. offsetleft refers to the status of the left-side or upper-layer control between OBJ and 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 have made a statement on 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 offsettop button of the "Submit" button refers to the interval between the "Submit" button and the border on the "tool" layer, because the upper border of the "tool" layer is closest to it.

The offsettop of the "reset" button refers to the interval between the "reset" button and the border on the "tool" layer, because the upper border of the "tool" layer is closest to it.

The offsetleft button of the "Submit" button refers to the interval between the "Submit" button and the left border of the "tool" layer, because the ratio to the left is the left border of the "tool" layer.

The "reset" button's offsetleft refers to the interval between the "reset" button and the right border of the "Submit" button, because the ratio to the left is the right border of 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. the value of the body is not stated in the browser (in fact, most of the scenes are due to document. the reason why the body statement does not match is not because the offset statement does not match). Click here to check the incorrect position.

Question: The difference between offsettop and style. Top

Common knowledge: offsettop, offsetleft, offsetwidth, and offsetheight

We know that offsettop can obtain the position of the top or outer element of the HTML 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 also the same.

Question: clientheight, offsetheight, and scrollheight

Here we will talk about four types of browsers for document. the clientheight, offsetheight, and scrollheight statements of the body. body. If it is an HTML control, it does not match. Click here to view details.

These four browsers are IE (Internet Explorer), NS (Netscape), opera, and FF (Firefox ).

2. clientheight

Clientheight

The master has nothing to say about 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, this area of the last object below the condition bar is irrelevant to the page content.

Offsetheight

IE and opera hold that offsetheight = clientheight + migration transition 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 height of the webpage content, but when the height of the webpage content is smaller than clientheight, the value of scrollheight is clientheight, while the offsetheight can be smaller than clientheight.

IE and opera hold that offsetheight is the border added to the clientheight transition bar in the visible area. Scrollheight indicates the actual height of the webpage content.

Likewise

Clientwidth, offsetwidth and scrollwidth are the same as those above, but you can change the height to the width.

However

FF does not declare clientheight In the invalid doctype, but does not declare clientheight in XHTML 1 trasitional. This problem does not exist in other browsers.

Title: scrolltop, scrollleft, scrollwidth, and scrollheight

3. scrollleft

Scrolltop is the height of a volume. For 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, 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 Project Group 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 provide comprehensive support, while Netscape and opera do not support scrolltop and scrollleft (except document. Body ).

Announcement time: 20:20:16

Questions: offsettop, offsetleft, offsetwidth, and offsetheight

4. clientleft

Returns the gap 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 always been vague. After a day of study, we have obtained the following results:

1. offsettop:

The interval between the current object and the top of its parent layer.

You cannot assign values to objects. Use the style. Top attribute to set the interval between objects and the top of the page.

2. offsetleft:

The interval between the current object and the left side of its parent layer.

You cannot assign a value to the object. Use the style. Left attribute to set the interval between the object and the left part of the page.

3. offsetwidth:

The width of the current object.

And style. the difference between the width attribute is: 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 non-conforming 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 height value of the object in non-conforming pages instead of the percentage value.

5. offsetparent:

The upper-level object of the current object.

Important. if an object is contained in a DIV, this div is not considered as the parent layer of the object (that is, the parent layer of the object skips the DIV object) when the upper layer is a table, there will be no questions.

This property can obtain the absolute position of the current object in a page of non-size.

Obtain the absolute position script code

1 function 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 leftmost margin of the object to the left margin of the object displayed in the current window.

It is the interval at which the migration change lines pull under the landscape of horizontal migration changes.

7. scrolltop

The interval between the top edge of the object and the top edge of the object within the limitation displayed in the current window.

It is the interval at which the migration change lines pull under the portrait migration transition lines.

Here we will talk about four types of browsers for document. the clientheight, offsetheight, and scrollheight statements of the body. body. If it is an HTML control, it does not match. Click here to view details.

These four browsers are IE (Internet Explorer), NS (Netscape), opera, and FF (Firefox ).

Clientheight

The master has nothing to say about 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, this area of the last object below the condition bar is irrelevant to the page content.

Offsetheight

IE and opera hold that offsetheight = clientheight + migration transition 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 height of the webpage content, but when the height of the webpage content is smaller than clientheight, the value of scrollheight is clientheight, while the offsetheight can be smaller than clientheight.

IE and opera hold that offsetheight is the border added to the clientheight transition bar in the visible area. Scrollheight indicates the actual height of the webpage content.

Likewise

Clientwidth, offsetwidth and scrollwidth are the same as those above, but you can change the height to the width.