通過一個demo測試這三個屬性的差別。

說明：

scrollWidth：對象的實際內(nèi)容的寬度，不包邊線寬度，會隨對象中內(nèi)容超過可視區(qū)后而變大。
clientWidth：對象內(nèi)容的可視區(qū)的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。
offsetWidth：對象整體的實際寬度，包滾動條等邊線，會隨對象顯示大小的變化而改變。

該demo就在頁面中放一個textarea元素，采用默認寬高顯示。

情況1：

元素內(nèi)無內(nèi)容或者內(nèi)容不超過可視區(qū)，滾動不出現(xiàn)或不可用的情況下。

scrollWidth=clientWidth，兩者皆為內(nèi)容可視區(qū)的寬度。

offsetWidth為元素的實際寬度。

情況2：

元素的內(nèi)容超過可視區(qū)，滾動條出現(xiàn)和可用的情況下。

scrollWidth>clientWidth。

scrollWidth為實際內(nèi)容的寬度。

clientWidth是內(nèi)容可視區(qū)的寬度。

offsetWidth是元素的實際寬度。

END

以上就是scrollWidth,clientWidth,offsetWidth區(qū)別的全部內(nèi)容，希望對大家有所幫助。