scrollHeight,clientHeight,offsetHeight的差别转载

浏览器窗口和网页文档

先明确浏览器窗口和网页文档的区别，拿下面这张图来说

右边那张图中，大红色方框框起来的是浏览器窗口，而网页文档就是左边这张图。先不用去管scrollHeight这些东西，后面再解释。
先明确浏览器窗口和网页文档是不同的！！不用去纠结它们什么时候高度相等，明白这两个代表的含义才是最重要的。

浏览器窗口

console.log(window.innerWidth)      //浏览器窗口宽度(不包括菜单栏)
console.log(window.innerHeight)     //浏览器窗口高度(不包括菜单栏)

一些注意点：

无论是否出现滚动条，这两个值都是不变的。
当调整浏览器大小时，这两个值会变。
简而言之：就是你可以看到的浏览器视窗的大小(不包括顶部的菜单栏)

有小伙伴会问了，那window.outerWidth是和outerHeight是什么呢，这两个就是包含菜单栏的，比如你可以在chrome里按下F12打开调试窗口，放在右侧，就可以发现innerWidth和outerWidth是不同的，如下：。

console.log(window.outerWidth)      //浏览器窗口宽度(包括菜单栏)  值不变
console.log(window.outerHeight)     //浏览器窗口高度(包括菜单栏)

网页文档

console.log($(.main).width())    //文档可视窗口(不包括滚动条17px)
console.log($(.main).height())   //文档可视窗口(不包括滚动条17px)

console.log(document.querySelector(".main").scrollWidth)    //文档可视窗口(不包括滚动条17px)
console.log(document.querySelector(".main").scrollHeight)   //内部的总高度 + padding+margin

好了既然这里讲到scrollHeight了，那刚好把clientHeight和offsetHeight讲了。
要比较这三个属性的不同，有个前提条件，就是元素要出现滚动条。举个栗子就是：

    


        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
        

    

对于这三个属性，还是拿这张图来说：

scrollHeight: 就是main内部的总高度
这里内部元素就是box所撑开的高度(上下padding + 上下margin + 自身 )

clientHeight: 就是container内部可见高度 + 自身。
内部可见高度为200 - 17(滚动条高度)

offsetHeight: 也是container自己本身的可见高度 + 自身+ 自身border + 滚动条
与clientHeight不同的就是要加上自身border以及滚动条的高度