项目中经常会读取屏幕文档内容里的一下高度宽度值，检测他们的变化，这里有很多种高度容易混淆认识，这里总结一下他们的取值和区别。
js常用高度/宽度取值
web环境中对于页面高度取值，有屏幕、浏览器、页面的区分。
一个页面从外到内的容器为：
屏幕》浏览器》页面本身
- 屏幕信息-屏幕尺寸信息,它是固定的并不会随着窗口的大小的变化而改变。
screen.height-屏幕高度；
screen.availHeight-屏幕可用个高度，及拼命高度减去上下任务栏后的高度；
screen.width、screen.availWidth
- 浏览器信息-浏览器尺寸信息；如浏览器、内部页面及工具栏的高度和宽度。
window.outerHeight-浏览器高度；
window.innerHeight-浏览器内页面可用高度，此高度包含水平滚动条高度（如存在），可表示浏览器当前高度去除浏览器边框、工具条后的高度。
window.outerWidth、window.innerWidth;
window.outerHeight-window.innerHeight工具栏（地址栏、书签栏、浏览器边框等）高度；
- 页面信息-介绍HTML页面尺寸信息；如body总的、展示的高度和宽度。
document.body.clientHeight-body展示高度，表示body在浏览器内显示的区域高度；
document.body.offsetHeight-body总高度；
document.body.clientWidth 、document.body.offsetWidth
获取窗口大小时我们可以写的兼容性写法
1 | var height=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; |
document.Element是文档根元素即html
- 滚动信息
clientHeight-内部可视区大小；
offsetHeight-包括border和滚动条的可视区大小；
scrollHeight-元素内容高度，包括溢出高度；
scrollTop-元素内容上滚动多少像素；
clientWidth、offsetWidth、scrollWidth、scrollLeft
offsetTop距离上方或者上层控件的位置；
jQuery常用高度/宽度取值
- $(window).height(); //浏览器当下窗口可视区域高度
- $(document).height(); //浏览器当下窗口文档的高度
- $(document.body).height();//浏览器当下窗口文档body的高度
- $(document.body).outerHeight(true);//浏览器当下窗口文档body的总高度 包括border padding margin
- $(window).width(); //浏览器当下窗口可视区域宽度
- $(document).width();//浏览器当下窗口文档对象宽度
- $(document.body).width();//浏览器当下窗口文档body的高度
- $(document.body).outerWidth(true);//浏览器当下窗口文档body的总宽度 包括border padding margin
- $(document).scrollTop(); //获取滚动条到顶部的垂直高度
- $(document).scrollLeft(); //获取滚动条到左边的宽度
参考
