The coordinate system in HTML and its application in mouseevent and element box

The coordinate system in HTML and its application in mouseevent and element box

HTML has four coordinate systems: screen, page,client, and offset, which describe the box dimensions of DOM elements and

The position in the MouseEvent,

Screens: Screen coordinate system, (SCREENX,SCREENX), the upper-left corner of the screen is (0,0), which is independent of the window, regardless of how the browser's window is moved and scaled, the origin of the screens coordinate system is always in the upper left corner of the display, and W and H are unchanged.

Page: Coordinate system, (PageX, Pagey), the upper-left corner of the page is (0,0)

Client: Customer area coordinate system, (ClientX, ClientY), local (DOM conten0074) coordinate system,

Offset: Shift coordinate system (OffsetX, OffsetY), relative to target node's padding Edge, he is the most varied because his benchmark, target node, is constantly changing as the mouse moves.

Note: x, y: Aliases for Clientx and clienty coordinates, respectively, belong to the client coordinate system

Note: The coordinate units in this are browser coordinate units, not the physical resolution of the display,

For example: the resolution of the display is, 1920 * 1200, but the browser coordinates are only 1280*800

Window object is Document.defaultview

Where Window.outerheight is the height of the entire window, and window.innerheight. Just browser's client area.

(viewport), the difference between the two is browser own occupied title area and address bar area

In full screen mode (completely hide browser title and Address bar), window.outerheight = = = Window.innerheight = = = Screen.height

Offsetheight, ClientHeight, scrollheight?

The height of the div element

Elmnt.clientheight: "Viewable" height, including padding, not including border, scrollbar or margin.

Elmnt.offsetheight:

If the content length of an element is higher than the actual height of the element, this viewable height returns only the height of the visible part

offsetheight:viewable height, including padding, border and ScrollBar.

The coordinate system in HTML and its application in mouseevent and element box