1. 程式人生 > >offsetWidth clientWidth scrollWidth 三者之間的區別和聯系

offsetWidth clientWidth scrollWidth 三者之間的區別和聯系

alt offset ges bsp 技術 scroll .cn 邊線 技術分享

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

技術分享

如果沒有被卷去的寬度,則scrollWidth等於clientWidth, offsetWidth 多出了滾軸區域寬度。

有了被卷去寬度,則如上圖所示

offsetWidth clientWidth scrollWidth 三者之間的區別和聯系