最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要講解了javascript中如何使用offsetWidth、clientWidth、innerWidth及相關(guān)屬性，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

永定ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！

關(guān)于js中的offsetWidth、clientWidth、scrollWidth等一系列屬性及其方法一直都傻傻分不清，這里就來(lái)總結(jié)一下這些方法的用法和含義。

一、clientWidth和clientHeigh 、 clientTop和clientLeft

1，clientWidth的實(shí)際寬度
clientWidth = width+左右padding

2，clientHeigh的實(shí)際高度
clientHeigh = height + 上下padding 

3，clientTop的實(shí)際寬度
clientTop = boder.top(上邊框的寬度)

4，clientLeft的實(shí)際寬度
clientLeft = boder.left(左邊框的寬度)

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

1,offsetWidth的實(shí)際寬度
offsetWidth = width + 左右padding + 左右boder

2,offsetHeith的實(shí)際高度
offsetHeith = height + 上下padding + 上下boder

3，offsetTop實(shí)際寬度
offsetTop：當(dāng)前元素 上邊框 外邊緣 到 最近的已定位父級(jí)（offsetParent） 上邊框 內(nèi)邊緣的 距離。如果父級(jí)都沒(méi)有定位，則分別是到body 頂部 和左邊的距離

4，offsetLeft實(shí)際寬度
offsetLeft：當(dāng)前元素 左邊框 外邊緣 到 最近的已定位父級(jí)（offsetParent） 左邊框 內(nèi)邊緣的            距離。如果父級(jí)都沒(méi)有定位，則分別是到body 頂部 和左邊的距離

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1，scrollWidth實(shí)際寬度
scrollWidth：獲取指定標(biāo)簽內(nèi)容層的真實(shí)寬度（可視區(qū)域?qū)挾?被隱藏區(qū)域?qū)挾龋?/p>

2，scrollHeight的實(shí)際高度
scrollHeight：獲取指定標(biāo)簽內(nèi)容層的真實(shí)高度（可視區(qū)域高度+被隱藏區(qū)域高度）

3，scrollTop
scrollTop :內(nèi)容層頂部 到 可視區(qū)域頂部的距離。
實(shí)例：var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;持續(xù)獲取高度的方式：

window.addEventListener('scroll', ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});

4，scrollLeft
scrollLeft:內(nèi)容層左端 到 可視區(qū)域左端的距離.

注意： 下面元素屬性和元素方法都通過(guò) elem.屬性 或 elem.方法 的方式使用，window屬性通過(guò) window.屬性 的方式使用，document屬性則通過(guò)document調(diào)用。

上面屬性中，關(guān)于 window.innerWidth 和 window.innerHeight， 我自己測(cè)試的結(jié)果值是包含滾動(dòng)條的，但網(wǎng)上的教程和相關(guān)文檔都說(shuō)不包括滾動(dòng)條，雖然滾動(dòng)條的寬度不大，對(duì)整體影響也不明顯，但如果有道友有準(zhǔn)確答案的，還請(qǐng)不吝賜教，順手留個(gè)言，謝謝！

看完上述內(nèi)容，是不是對(duì)javascript中如何使用offsetWidth、clientWidth、innerWidth及相關(guān)屬性有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。