The difference between Scrollwidth,clientwidth and offsetwidth _ Experience Exchange

Source: Internet
Author: User
the difference between Scrollwidth,clientwidth and offsetwidth _ Experience Exchange

ScrollWidth
Is the width of the actual content of the object, not the width of the edge, which changes depending on how much content is in the object (the actual width of the object may be changed by more content).
ClientWidth
Is the width of the object visible, without edges such as the scroll bar, which changes with the window's display size.
Offsetwidth
is the visible width of the object, and edges such as the package scroll bar change as the window's display size changes.

An example of ScrollWidth and clientwidth:



Enter content in the text box, and the value of ScrollWidth and ClientWidth is the same when the horizontal scroll bar does not come out. When a line exceeds the width of the text box, there is a horizontal scroll bar, and the value of the scrollwidth is changed.
ScrollWidth is the width of the actual content of the object.
ClientWidth is the width (without edges) The object sees, and this example does not change.

An example of ClientWidth and offsetwidth:



The value of offsetwidth is always greater than the value of clientwidth.
ClientWidth is the width that the object sees (without edges)
Offsetwidth is the width that the object sees (including edges, such as the width of the scroll bar)

The above is the difference between Scrollwidth,clientwidth and offsetwidth _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

  • Related Article

    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.