The difference _javascript skill of scrollwidth,clientwidth,offsetwidth

Test the difference between these three properties through a demo.

Description

ScrollWidth: The width of the actual content of the object, not wrapping the edge width, increases as the contents of the object exceed the viewable area.
ClientWidth: The width of the visual area of the object's content, not wrapping the edges of the scroll bar, will change with the size of the object display.
Offsetwidth: The actual width of the object as a whole, the wrapping line, and so on, will change with the size of the object display.

The demo will put a TEXTAREA element in the page, using the default width-height display.

Situation 1:

There is no content in the element or the content does not exceed the viewable area, scrolling does not appear or is not available.

Scrollwidth=clientwidth, both are the width of the content viewable area.

Offsetwidth is the actual width of the element.

Situation 2:

The content of the element exceeds the viewable area, and the scroll bar appears and is available.

Scrollwidth>clientwidth.

ScrollWidth is the width of the actual content.

ClientWidth is the width of the content viewable area.

The offsetwidth is the actual width of the element.

End

The above is the whole content of scrollwidth,clientwidth,offsetwidth difference, hope to be helpful to everybody.