Usage and differences of ClientX, PageX, ScrollLeft, Offsetleft, ClientWidth, Screen.width

I. Definition and usage

1.event.clientx: The horizontal offset of the event object;

Event.clienty: The vertical offset of the event object;

2.event.pagex: The event object plus the horizontal offset after the scrolling distance;

Event.pagey: The event object plus the vertical offset after the scrolling distance;

3.$ (selector). ScrollLeft (offset) =$ (selector). Offset (). Left: Gets or sets the scrolling horizontal position of the object;

$ (selector). scrolltop (offset) =$ (selector). Offset (). Top: Gets or sets the scroll vertical position of the object;

4.div.offsetleft: The horizontal offset of the object;

Div.offsettop: The vertical offset of the object;

5.div.clientwidth: The width of the object;

Div.clientheight: The height of the object;

6.screen.width: Full screen width;

Screen.height: Full screen height;

Second, the picture is as follows:

Usage and differences of ClientX, PageX, ScrollLeft, Offsetleft, ClientWidth, Screen.width