2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

通過一個(gè)demo測試這三個(gè)屬性的差別。

說明：

scrollWidth：對(duì)象的實(shí)際內(nèi)容的寬度，不包邊線寬度，會(huì)隨對(duì)象中內(nèi)容超過可視區(qū)后而變大。
clientWidth：對(duì)象內(nèi)容的可視區(qū)的寬度，不包滾動(dòng)條等邊線，會(huì)隨對(duì)象顯示大小的變化而改變。 ?
offsetWidth：對(duì)象整體的實(shí)際寬度，包滾動(dòng)條等邊線，會(huì)隨對(duì)象顯示大小的變化而改變。

?

該demo就在頁面中放一個(gè)textarea元素，采用默認(rèn)寬高顯示。

?

情況1：

元素內(nèi)無內(nèi)容或者內(nèi)容不超過可視區(qū)，滾動(dòng)不出現(xiàn)或不可用的情況下。

scrollWidth=clientWidth，兩者皆為內(nèi)容可視區(qū)的寬度。

offsetWidth為元素的實(shí)際寬度。

?

情況2：

元素的內(nèi)容超過可視區(qū)，滾動(dòng)條出現(xiàn)和可用的情況下。

scrollWidth>clientWidth。

scrollWidth為實(shí)際內(nèi)容的寬度。

clientWidth是內(nèi)容可視區(qū)的寬度。

offsetWidth是元素的實(shí)際寬度。

?/***************************************/

scrollTop:頁面利用滾動(dòng)條滾動(dòng)到下方時(shí)，隱藏在滾動(dòng)條上方的頁面的高度；
scrollLeft:頁面利用滾動(dòng)條滾動(dòng)到右側(cè)時(shí)，隱藏在滾動(dòng)條左側(cè)的頁面的寬度

轉(zhuǎn)載于:https://my.oschina.net/u/2395167/blog/645975

總結(jié)

以上是生活随笔為你收集整理的scrollWidth,clientWidth,offsetWidth的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。