scrollWidth,clientWidth,offsetWidth的區(qū)別
通過(guò)一個(gè)demo測(cè)試這三個(gè)屬性的差別。
說(shuō)明:
scrollWidth:對(duì)象的實(shí)際內(nèi)容的寬度,不包邊線寬度,會(huì)隨對(duì)象中內(nèi)容超過(guò)可視區(qū)后而變大。
clientWidth:對(duì)象內(nèi)容的可視區(qū)的寬度,不包滾動(dòng)條等邊線,會(huì)隨對(duì)象顯示大小的變化而改變。
offsetWidth:對(duì)象整體的實(shí)際寬度,包滾動(dòng)條等邊線,會(huì)隨對(duì)象顯示大小的變化而改變。
該demo就在頁(yè)面中放一個(gè)textarea元素,采用默認(rèn)寬高顯示。
情況1:
元素內(nèi)無(wú)內(nèi)容或者內(nèi)容不超過(guò)可視區(qū),滾動(dòng)不出現(xiàn)或不可用的情況下。
scrollWidth=clientWidth,兩者皆為內(nèi)容可視區(qū)的寬度。
offsetWidth為元素的實(shí)際寬度。
情況2:
元素的內(nèi)容超過(guò)可視區(qū),滾動(dòng)條出現(xiàn)和可用的情況下。
scrollWidth>clientWidth。
scrollWidth為實(shí)際內(nèi)容的寬度。
clientWidth是內(nèi)容可視區(qū)的寬度。
offsetWidth是元素的實(shí)際寬度。
END
以上就是scrollWidth,clientWidth,offsetWidth區(qū)別的全部?jī)?nèi)容,希望對(duì)大家有所幫助。
相關(guān)文章
利用H5api實(shí)現(xiàn)時(shí)鐘的繪制(javascript)
這篇文章主要為大家詳細(xì)介紹了利用H5api實(shí)現(xiàn)時(shí)鐘的繪制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)(mysql)傻瓜式教程(二)
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)(mysql)傻瓜教程(二)的相關(guān)資料,需要的朋友可以參考下2015-12-12javascript控制frame,iframe的src屬性代碼
原理就是通過(guò)獲取當(dāng)前網(wǎng)頁(yè)地址欄的信息傳參,然后設(shè)置框架的地址。2009-12-12js實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)播放
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07關(guān)于JavaScript中name的意義沖突示例介紹
這篇文章主要介紹了關(guān)于JavaScript中name的意義沖突,需要的朋友可以參考下2014-05-05Javascript 圓角div的實(shí)現(xiàn)代碼
為什么要做圓角的div: 圓角div平滑美觀,某些情況下有比較不錯(cuò)的效果。比如說(shuō)要做一個(gè)報(bào)message的消息框,那么動(dòng)態(tài)的生成一個(gè)圓角div則很有意義。而對(duì)html樣式控制的css本身是不直接支持圓角div的。2009-10-10用js腳本控制asp.net下treeview的NodeCheck的實(shí)現(xiàn)代碼
根據(jù)TreeView2.js修改后的TreeView父節(jié)點(diǎn)與子節(jié)點(diǎn)的CheckBox聯(lián)動(dòng).2010-03-03