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

This is a common attribute for making scrolling 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;
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;

 

 

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.

Another
External: what we refer to here refers to the attribute value of the HTML control, not document. Body, document. Body
The value of is interpreted differently in different browsers (in fact, most environments are caused by different interpretations of document. body, not due to offset
), 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,
FF thinks that both offsetheight and scrollheight are the height of the webpage content, but when the height of the webpage content is less than or equal to clientheight
The value of scrollheight is clientheight, while offsetheight can be smaller 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 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 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 ).

Posting time: 20:20:16

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.

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 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,
FF thinks that both offsetheight and scrollheight are the height of the webpage content, but when the height of the webpage content is less than or equal to clientheight
The value of scrollheight is clientheight, while offsetheight can be smaller 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.