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

原文鏈接：https://blog.csdn.net/qq_33036599/article/details/81224346

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

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

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