2019獨角獸企業重金招聘Python工程師標準>>>

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

說明：

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

?

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

?

情況1：

元素內無內容或者內容不超過可視區，滾動不出現或不可用的情況下。

scrollWidth=clientWidth，兩者皆為內容可視區的寬度。

offsetWidth為元素的實際寬度。

?

情況2：

元素的內容超過可視區，滾動條出現和可用的情況下。

scrollWidth>clientWidth。

scrollWidth為實際內容的寬度。

clientWidth是內容可視區的寬度。

offsetWidth是元素的實際寬度。

?/***************************************/

scrollTop:頁面利用滾動條滾動到下方時，隱藏在滾動條上方的頁面的高度；
scrollLeft:頁面利用滾動條滾動到右側時，隱藏在滾動條左側的頁面的寬度

轉載于:https://my.oschina.net/u/2395167/blog/645975

總結

以上是生活随笔為你收集整理的scrollWidth,clientWidth,offsetWidth的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。