The difference between scrollwidth,clientwidth,offsetwidth

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.