scrollWidth,clientWidth,offsetWidth的區(qū)別
通過一個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)容,希望對大家有所幫助。
相關文章
利用H5api實現(xiàn)時鐘的繪制(javascript)
這篇文章主要為大家詳細介紹了利用H5api實現(xiàn)時鐘的繪制,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-09-09Express實現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫(mysql)傻瓜式教程(二)
這篇文章主要介紹了Express實現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫(mysql)傻瓜教程(二)的相關資料,需要的朋友可以參考下2015-12-12javascript控制frame,iframe的src屬性代碼
原理就是通過獲取當前網(wǎng)頁地址欄的信息傳參,然后設置框架的地址。2009-12-12用js腳本控制asp.net下treeview的NodeCheck的實現(xiàn)代碼
根據(jù)TreeView2.js修改后的TreeView父節(jié)點與子節(jié)點的CheckBox聯(lián)動.2010-03-03