scrollWidth,clientWidth,offsetWidth的區(qū)別
通過一個demo測試這三個屬性的差別。
說明：
scrollWidth：對象的實際內(nèi)容的寬度，不包邊線寬度，會隨對象中內(nèi)容超過可視區(qū)后而變大。
clientWidth：對象內(nèi)容的可視區(qū)的寬度，不包滾動條等邊線，會隨對象顯示大小的變化而改變。
offsetWidth：對象整體的實際寬度，包滾動條等邊線，會隨對象顯示大小的變化而改變。
該demo就在頁面中放一個textarea元素，采用默認(rèn)寬高顯示。
情況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)容，希望對大家有所幫助。
相關(guān)文章
利用H5api實現(xiàn)時鐘的繪制(javascript)
這篇文章主要為大家詳細(xì)介紹了利用H5api實現(xiàn)時鐘的繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了在小程序中推送模板消息的實現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
本篇文章主要給大家詳細(xì)分析了js的作用域、預(yù)解析機制以及相關(guān)代碼分析，對此感興趣的朋友學(xué)習(xí)下吧。2018-02-02
Express實現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫（mysql）傻瓜式教程（二）
這篇文章主要介紹了Express實現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫（mysql）傻瓜教程（二）的相關(guān)資料,需要的朋友可以參考下2015-12-12
javascript控制frame,iframe的src屬性代碼
原理就是通過獲取當(dāng)前網(wǎng)頁地址欄的信息傳參，然后設(shè)置框架的地址。2009-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)列表自動滾動循環(huán)播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
關(guān)于JavaScript中name的意義沖突示例介紹
這篇文章主要介紹了關(guān)于JavaScript中name的意義沖突,需要的朋友可以參考下2014-05-05
為什么要做圓角的div： 圓角div平滑美觀，某些情況下有比較不錯的效果。比如說要做一個報message的消息框，那么動態(tài)的生成一個圓角div則很有意義。而對html樣式控制的css本身是不直接支持圓角div的。2009-10-10
獲取HTMl文件制定的元素的實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
用js腳本控制asp.net下treeview的NodeCheck的實現(xiàn)代碼
根據(jù)TreeView2.js修改后的TreeView父節(jié)點與子節(jié)點的CheckBox聯(lián)動.2010-03-03