Differences among scrollwidth and clientwidth

Source: Internet
Author: User

Scrollwidth is the width of the actual content of the object. The width of the actual content changes with the number of content in the object (if the content is too large, the actual width of the object may be changed)

Clientwidth is the visible width of the object. If the value of clientwidth is not set to the same side of the scroll bar, it will change with the display size of the window.

Offsetwidth is the visible width of the object. The package's scroll bar and other edges change with the display size of the window.

Scrollheight: gets the scroll height of an object.

Offsetheight: gets the object relative to the layout or the parent Coordinate

Scrollleft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.

Offsetleft: gets the object relative to the layout or

Scrolltop: sets or obtains the distance between the top of the object and the top of the visible content in the window.

Top position of the calculation of the parent coordinate specified by the offsettop attribute

Height of the parent coordinate specified by the offsetparent attribute

The left-side location of the calculation of the parent coordinate specified by the offsetparent attribute

The horizontal coordinates of event. clientx relative to the document

The vertical coordinates of event. clienty relative to the document

Horizontal coordinates of event. offsetx relative to the container

Event. offsety vertical coordinates of the container

Document.doc umentelement. scrolltop vertical scroll value event.clientx?document.doc umentelement. The horizontal coordinate of scrolltop relative to the document + The amount of vertical scrolling

The difference between Firefox and IE is as follows:

Ie6.0, ff1.06 +:

Clientwidth = width + padding clientheight = height + padding

Offsetwidth = width + padding + border

Offsetheight = height + padding + border

Ie5.0/5.5:

Clientwidth = width-border

Clientheight = height-border

Offsetwidth = width

Offsetheight = height

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.