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

一、clientWidth和clientHeigh 、 clientTop和clientLeft

1，clientWidth的實際寬度clientWidth = width+左右padding

2，clientHeigh的實際高度clientHeigh = height + 上下padding

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

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

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

1,offsetWidth的實際寬度offsetWidth = width + 左右padding + 左右boder

2,offsetHeith的實際高度offsetHeith = height + 上下padding + 上下boder

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

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

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

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

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

3，scrollTopscrollTop :內(nèi)容層頂部 到 可視區(qū)域頂部的距離。實例：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，scrollLeftscrollLeft:內(nèi)容層左端 到 可視區(qū)域左端的距離.

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

<script> /* ****** 元素視圖屬性 * offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下border-width * * clientWidth 水平方向 width + 左右padding * clientHeight 垂直方向 height + 上下padding * * offsetTop 獲取當前元素到 定位父節(jié)點 的top方向的距離 * offsetLeft 獲取當前元素到 定位父節(jié)點 的left方向的距離 * * scrollWidth 元素內(nèi)容真實的寬度，內(nèi)容不超出盒子高度時為盒子的clientWidth * scrollHeight 元素內(nèi)容真實的高度，內(nèi)容不超出盒子高度時為盒子的clientHeight * ****** 元素視圖屬性結(jié)束 * ****** Window視圖屬性（低版本IE瀏覽器[<IE9]不支持） 【自測包含滾動條，但網(wǎng)絡(luò)教程都說不包含？？？】 * innerWidth 瀏覽器窗口可視區(qū)寬度（不包括瀏覽器控制臺、菜單欄、工具欄） * innerHeight 瀏覽器窗口可視區(qū)高度（不包括瀏覽器控制臺、菜單欄、工具欄） * ***** Window視圖屬性結(jié)束 * ****** Document文檔視圖 * （低版本IE的innerWidth、innerHeight的代替方案） * document.documentElement.clientWidth 瀏覽器窗口可視區(qū)寬度（不包括瀏覽器控制臺、菜單欄、工具欄、滾動條） * document.documentElement.clientHeight 瀏覽器窗口可視區(qū)高度（不包括瀏覽器控制臺、菜單欄、工具欄、滾動條） * * document.documentElement.offsetHeight 獲取整個文檔的高度（包含body的margin） * document.body.offsetHeight 獲取整個文檔的高度（不包含body的margin） * * document.documentElement.scrollTop 返回文檔的滾動top方向的距離（當窗口發(fā)生滾動時值改變） * document.documentElement.scrollLeft 返回文檔的滾動left方向的距離（當窗口發(fā)生滾動時值改變） ****** Document文檔視圖結(jié)束 * ****** 元素方法 * 1. getBoundingClientRect() 獲取元素到body * bottom: 元素底邊（包括border）到可視區(qū)最頂部的距離 * left: 元素最左邊（不包括border）到可視區(qū)最左邊的距離 * right: 元素最右邊（包括border）到可視區(qū)最左邊的距離 * top: 元素頂邊（不包括border）到可視區(qū)最頂部的距離 * height: 元素的offsetHeight * width: 元素的offsetWidth * x: 元素左上角的x坐標 * y: 元素左上角的y坐標 * * 2. scrollIntoView() 讓元素滾動到可視區(qū) * * ***** 元素方法結(jié)束 * */</script>

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

到此這篇關(guān)于javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法的文章就介紹到這了,更多相關(guān)javascript offsetWidth clientWidth innerWidth內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！