web前端學習筆記---scrollWidth,clientWidth,offsetWidth的區別


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

說明:

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

 

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

 

情況1:

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

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

offsetWidth為元素的實際寬度。

 

情況2:

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

scrollWidth>clientWidth。

scrollWidth為實際內容的寬度。

clientWidth是內容可視區的寬度。

offsetWidth是元素的實際寬度。

 

以上。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM