scrollWidth,clientWidth,offsetWidth的區別_javascript技巧
來源：懂視網
責編：小采
時間：2020-11-27 21:31:58
scrollWidth,clientWidth,offsetWidth的區別_javascript技巧
scrollWidth,clientWidth,offsetWidth的區別_javascript技巧:通過一個demo測試這三個屬性的差別。 說明： scrollWidth：對象的實際內容的寬度，不包邊線寬度，會隨對象中內容超過可視區后而變大。 clientWidth：對象內容的可視區的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。 offsetWidth：
導讀scrollWidth,clientWidth,offsetWidth的區別_javascript技巧:通過一個demo測試這三個屬性的差別。 說明： scrollWidth：對象的實際內容的寬度，不包邊線寬度，會隨對象中內容超過可視區后而變大。 clientWidth：對象內容的可視區的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。 offsetWidth：
通過一個demo測試這三個屬性的差別。
說明：
scrollWidth：對象的實際內容的寬度，不包邊線寬度，會隨對象中內容超過可視區后而變大。
clientWidth：對象內容的可視區的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。
offsetWidth：對象整體的實際寬度，包滾動條等邊線，會隨對象顯示大小的變化而改變。
該demo就在頁面中放一個textarea元素，采用默認寬高顯示。
情況1：
元素內無內容或者內容不超過可視區，滾動不出現或不可用的情況下。
scrollWidth=clientWidth，兩者皆為內容可視區的寬度。
offsetWidth為元素的實際寬度。
情況2：
元素的內容超過可視區，滾動條出現和可用的情況下。
scrollWidth>clientWidth。
scrollWidth為實際內容的寬度。
clientWidth是內容可視區的寬度。
offsetWidth是元素的實際寬度。
END
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
scrollWidth,clientWidth,offsetWidth的區別_javascript技巧
scrollWidth,clientWidth,offsetWidth的區別_javascript技巧:通過一個demo測試這三個屬性的差別。 說明： scrollWidth：對象的實際內容的寬度，不包邊線寬度，會隨對象中內容超過可視區后而變大。 clientWidth：對象內容的可視區的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。 offsetWidth：
