The difference and significance of clientwidth offsetwidth ScrollWidth in JS

Web 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;
Screen available working area width: window.screen.availWidth;

1, offsetwidth (Width+padding+border)

The width of the current object.

Style.width is also the width of the current object (Width+padding+border).

Difference: 1) style.width return value in addition to the number of units px;

2) If the width of the object is set to a percentage width, whether the page becomes larger or smaller,

Style.width returns this percentage, while offsetwidth returns the width value of the object in different pages instead of the percent value;

3) If the width style is not specified for the HTML element, Style.width returns an empty string;

2, Offsetheight: (Height+padding+border)

The height of the current object.

Style.height is also the height of the current object (Height+padding+border).

Difference: 1) style.height return value in addition to the number of units px;

2) If the height of the object is set to a percentage height, whether the page becomes taller or shorter,

Style.height returns this percentage, while offsetheight returns the height value of the object in different pages instead of the percent value;

3) If the HTML element is not assigned a height style, then Style.height returns an empty string;

3, Offsetleft:

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

It cannot be assigned a value. Set the distance to the left of the upper layer of the object, using the Style.left property.

Style.left the distance from the current object to the left of its parent layer.

Difference: 1) Style.left return value in addition to the number of units px;

2) If the distance from the object to the left of its upper layer is set to a percentage,

Style.left returns this percentage, while Offsetleft returns the value of the distance to the left of its upper layer;

3) If the left style is not specified for the HTML element, Style.left returns an empty string;

4, OffsetTop:

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

It cannot be assigned a value. Set the distance of the object to the top edge of the upper layer with the Style.top property.

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

Difference: 1) style.top return value in addition to the number of units px;

2) If the distance from the top edge of the object to its upper layer is set to a percentage,

Style.top returns this percentage, while offsettop returns the value of the distance to the top edge of its ancestor;

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

Note: If the upper layer is the body, because IE, ff to padding, margin interpretation is not the same, so make clear that the treatment is not the following differences are not established.

IE 1) If the upper layer of div is body, and there is a div between the div and the body, such as Body->div->divo;divo's Offsettop=div padding+margin+boder;

2) If the upper layer of div is body, such as Body>divo;divo's Offsettop=div padding+margin+boder;

This Divo offsettop=divo margin >body.padding is Divo margin, otherwise body.padding who is big?

FF both of the above: offsettop=margin+padding;

(The body default padding in IE and FF is 10) in IE6.0 FF3.6.13

5. ScrollWidth: Gets the scrolling width of the object.

6. ScrollHeight: Gets the scrolling height of the object.

7. ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the object (width+padding as a whole)

8. ScrollTop: Sets or gets the distance between the top of the object and the topmost of the visible content in the object; (height+padding as a whole)

9. ClientWidth: Gets the width of the object visible content, excluding the scroll bar, excluding the border;

10. ClientHeight: Gets the height of the object's visible content, excluding the scroll bar, not including the border;

11. ClientLeft: Gets the border width of the object

12. ClientTop: Gets the border height of the object

13, OffsetParent: The parent Layer object of the current object.

IE6.0, ff1.06+:
clientwidth = width + padding
clientheight = height + padding
offsetwidth = width + padding + border
offsetheight = height + padding + border

ie5.0/5.5:
ClientWidth = Width-border
ClientHeight = Height-border
offsetwidth = width
offsetheight = height

The document type for the above property test is:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

The difference and significance of clientwidth offsetwidth ScrollWidth in JS