The difference between scrollwidth,clientwidth,offsetwidth

1 scrollwidth
Is the width of the actual content of the object, excluding edges (border or scrollbar) widths, which change depending on how much content is in the object (more content may change the object's actual degree)

2 clientwidth
Is the width of the object visible, excluding edges (border or scrollbars), which changes with the window's display size.

3 offsetwidth
is a The visible width of the object, including edges (border or scrollbars), changes with the window's display size.

As an example:

<wrap= "Off"  onmouseout= "alert (' scrollwidth: ' +this.scrollwidth+ ') /n clientwidth: ' +this.clientwidth); " ></ textarea >

<wrap= "Off"  onmouseout= "alert (' offsetwidth: ' +this.offsetwidth+ ') /n clientwidth: ' +this.clientwidth); " ></ textarea >

Pagex,pagey: The position of the mouse on the page, starting from the top left corner of the page, that is, the page as a reference point, not with the sliding bar movement and change, only Firefox has, ie not (pagey=clienty+scrolltop-clienttop;)

ClientX ClientY: Sets or gets the position of the mouse pointer relative to the x, y coordinate of the current window of the browser, where the customer area does not include controls and scrollbars for the window itself, and the reference point age scroll bar changes.

OffsetX OffsetY: Sets or gets the x, y coordinate of the mouse pointer's position relative to the object that triggered the event.

ScreenX ScreenY: Sets or gets the x, y coordinate of the position of the mouse pointer relative to the user's screen, which is the absolute position.

Event.x y: Sets or gets the X-pixel coordinates of the position of the mouse pointer relative to the parent document.

The difference between Client.x and x:

Event.clientx The x-coordinate of the mouse relative to the current window when the return event occurs
Event. X, too.
However, if you set the Location property value of the event object to relative
Event.clientx not change
and the event. x returns the coordinates of the event object relative to the ontology, IE is unique, this is basically the same as the Layerx/layery function, can not be used.

Illustration: PageX

ClientX

Compatibility table:

offsetx/offsety:w3c-ie+ firefox-opera+ safari+ chrome+x/y:w3c-ie+ firefox-opera+ Safari+ Chrome+layerx/layery:w3c-ie -firefox+ opera-safari+ chrome+pagex/pagey:w3c-ie-firefox+ opera+ safari+ chrome+clientx/clienty:w3c+ IE+ Firefox+ Ope ra+ safari+ chrome+screenx/screeny:w3c+ ie+ firefox+ opera+ safari+ chrome+

The difference between scrollwidth,clientwidth,offsetwidth