The difference between Scrollwidth,clientwidth and offsetwidth _ Experience Exchange
Source: Internet
Author: User
ScrollWidth
Is the width of the actual content of the object, not the edge width, and how much the content in the object changes (the actual width of the object may vary).
ClientWidth
is the visible width of the object, not wrapping the edges of the scroll bar, and changing the size of the window's display.
Offsetwidth
is the visible width of the object, and the side lines, such as the package scroll bar, change with the display size of the window.
An example of ScrollWidth and clientwidth:
<title>77.htm file </title>
<body>
<textarea wrap= "Off" "onfocus=" alert (' scrollwidth: ' +this.scrollwidth+ ' \ n clientwidth: ' +this.clientwidth '); " ></textarea>
</body>
Enter the content in the text box, and the values of ScrollWidth and clientwidth are the same when the horizontal scroll bar is not coming out. When a row exceeds the width of the text box, a horizontal scroll bar comes out and the scrollwidth value changes.
ScrollWidth is the width of the object's actual content.
ClientWidth is the width that the object sees (excluding the edges), and this example does not change.
An example of ClientWidth and offsetwidth:
<title>77.htm file </title>
<body>
<textarea wrap= "Off" "onfocus=" alert (' offsetwidth: ' +this.offsetwidth+ ' \ n clientwidth: ' +this.clientwidth '); " ></textarea>
</body>
The value of the offsetwidth is always greater than the value of the clientwidth.
ClientWidth is the width that the object sees (excluding edges)
Offsetwidth is the width that the object sees (including the edges, such as the width of the scroll bar)
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.
