Detailed parsing of js mouse and object coordinate control attributes _ javascript skills

This article mainly analyzes and introduces js mouse and object coordinate control attributes in detail. If you need them, you can refer to them and hope to help you. OffsetTop
Obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetParent attribute.

OffsetLeft
Obtains the left-side position of an object relative to the layout or the parent coordinate specified by the offsetParent attribute.

OffsetHeight
Obtains the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
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.

OffsetWidth
Obtains the width of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

OffsetParent
Gets the reference of the container Object Defining the offsetTop and offsetLeft attributes.

ClientHeight
Obtains the height of an object, without calculating any margin, border, scroll bar, or padding that may be applied to the object.
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.

ClientLeft
Obtain the distance between the offsetLeft attribute and the actual left side of the customer region.

ClientTop
Obtain the distance between the offsetTop attribute and the actual top of the customer region.

ClientWidth
Obtains the width of an object. It does not calculate any margin, border, scroll bar, or padding that may be applied to the object.

SCROLL attributes

Scroll
Set or obtain whether to disable scrolling.

ScrollHeight
Obtains the scroll height of an object.

ScrollLeft
Set or obtain the distance between the left-side border of the object and the leftmost side 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
Obtains the scroll width of an object. Event Properties
X
Sets or obtains the x-pixel coordinates of the cursor position relative to the parent document.

ScreenX
Set or obtain the x coordinate of the cursor position relative to the user's screen

OffsetX
Set or obtain the x coordinate of the object with the cursor position relative to the trigger event.

ClientX
Sets or obtains the x coordinate of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.

Here we will talk about the explanations of the four browsers on clientHeight, offsetHeight and scrollHeight of document. body. Here we will talk about document. body. If it is an HTML control, it will be different.

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 and FF hold that both offsetHeight and scrollHeight are the content height of the webpage. However, when the content height of the webpage is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while the value of offsetHeight can be less 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.

Js get page height

The Code is as follows:

Script
Function getInfo ()
{
Var s = "";
S + = "visible area width of the webpage:" + document. body. clientWidth;
S + = "visible area height of the webpage:" + document. body. clientHeight;
S + = "visible area width of the webpage:" + document. body. offsetWidth + "(including the width of the edge and scroll bar )";
S + = "visible area height of the webpage:" + document. body. offsetHeight + "(including the width of the edge )";
S + = "webpage body full text width:" + document. body. scrollWidth;
S + = "webpage text Height:" + document. body. scrollHeight;
S + = "high page volume (ff):" + document. body. scrollTop;
S + = "high page volume (ie):" + document.doc umentElement. scrollTop;
S + = "Left of the webpage to be rolled:" + document. body. scrollLeft;
S + = "webpage body part:" + window. screenTop;
S + = "webpage body part left:" + window. screenLeft;
S + = "screen Resolution height:" + window. screen. height;
S + = "screen Resolution width:" + window. screen. width;
S + = "available screen workspace Height:" + window. screen. availHeight;
S + = "available workspace width:" + window. screen. availWidth;
S + = "your screen settings are" + window. screen. colorDepth + "bit color ";
S + = "Your screen Settings" + window. screen. deviceXDPI + "pixels/inches ";
// Alert (s );
}
GetInfo ();
Script

In my local test:
It can be used in IE, FireFox, and Opera
Document. body. clientWidth
Document. body. clientHeight
It is very simple and convenient.
In the company's projects:
Opera is still in use
Document. body. clientWidth
Document. body. clientHeight
However, IE and FireFox use
Document.doc umentElement. clientWidth
Document.doc umentElement. clientHeight
It turned out to be W3C standards.

If this line is added to the page

In IE:
Document. body. clientWidth ==> BODY object width
Document. body. clientHeight ==> BODY object height
Document.doc umentElement. clientWidth ==> visible area width
Document.doc umentElement. clientHeight => visible area height

In FireFox:
Document. body. clientWidth ==> BODY object width
Document. body. clientHeight ==> BODY object height
Document.doc umentElement. clientWidth ==> visible area width
Document.doc umentElement. clientHeight => visible area height

In Opera:
Document. body. clientWidth ==> visible area width
Document. body. clientHeight ==> visible area height
Document.doc umentElement. clientWidth ==> Page Object width (that is, the width of the BODY object plus the Margin width)
Document.doc umentElement. clientHeight ==> Page Object height (that is, the height of the BODY object plus the Margin height)

If W3C standards are not defined

IE:
Document.doc umentElement. clientWidth ==> 0
Document.doc umentElement. clientHeight => 0

FireFox:
Document.doc umentElement. clientWidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)

Opera:
Document.doc umentElement. clientWidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentElement. clientHeight ==> Page Object height (that is, the BODY object height plus the Margin height)

It is really troublesome. In fact, from the perspective of development, it is much easier to reduce the number of objects and methods and not to use the latest standards.