javascript中的offsetWidth、clientWidth、innerWidth及相關屬性方法

關於js中的offsetWidth、clientWidth、scrollWidth等一系列屬性及其方法一直都傻傻分不清，這裡就來總結一下這些方法的用法和含義。

一、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） 上邊框 內邊緣的 距離。如果父級都沒有定位，則分別是到body 頂部 和左邊的距離

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

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1，scrollWidth實際寬度
scrollWidth：獲取指定標籤內容層的真實寬度（可視區域寬度+被隱藏區域寬度）。

2，scrollHeight的實際高度
scrollHeight：獲取指定標籤內容層的真實高度（可視區域高度+被隱藏區域高度）

3，scrollTop
scrollTop :內容層頂部 到 可視區域頂部的距離。
實例：var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;持續獲取高度的方式：

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

4，scrollLeft
scrollLeft:內容層左端 到 可視區域左端的距離.

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

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