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-09
這篇文章主要介紹了在小程序中推送模板消息的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
本篇文章主要給大家詳細(xì)分析了js的作用域、預(yù)解析機(jī)制以及相關(guān)代碼分析，對(duì)此感興趣的朋友學(xué)習(xí)下吧。2018-02-02
Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜式教程（二）
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)（mysql）傻瓜教程（二）的相關(guān)資料,需要的朋友可以參考下2015-12-12
javascript控制frame,iframe的src屬性代碼
原理就是通過(guò)獲取當(dāng)前網(wǎng)頁(yè)地址欄的信息傳參，然后設(shè)置框架的地址。2009-12-12
js實(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-05
Javascript 圓角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
獲取HTMl文件制定的元素的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
用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