一.JavaScript获取各种高度和宽度
1.和窗口大小有关
document.body.clientWidth: 可视区域的宽
document.body.clientHeight: 可视区域的高
window.innerHeight/window.innerWidth: 声明了窗口的文档显示区的高度和宽度，以像素计。
这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。
document.documentElement.clientWidth: 可见区域的宽
document.documentElement.clientHeigth: 可见区域的高
注：document.body.clientHeight、window.innerHeight、document.documentElement.clientHeight三者的区别
documet.body.clientWidth获取的是整个页面的高度，当页面没有出现滚动条是，doucment.body.clientHeight和document.documentElement.clientHeight相同
2.获取元素的大小
.offsetWidth 自身宽度，包括左右边框
.offsetHeight 自身高度，包括上下边框
.clientWidth 可视宽度，不包括左右边框
.clientHeight 可视高度，不包括上下边框
3.获取滚动距离
.scrollWidth 元素的滚动宽度
.scrollHeight 元素的滚动高度
4.元素被卷起的大小
.scrollTop 竖直滚动条滚动的距离
.scrollLeft 水平滚动条滚动的距离
5.获取浏览器窗口位置（和窗口的大小有关）
window.screenLeft / window.screenX 网页正文部分上
window.screenTop/ window.screenY 网页正文部分上
注： IE、chrome、safair、opera都支持window.screenLeft 和 window.screenTop， 但是firefox不支持
Firefox、chrome、safair、opera都支持 window.screenX和window.screenY，但是IE不支持
6.获取屏幕分辨率
window.screen.height 屏幕分辨率的高
window.screen.width 屏幕分辨率的宽
7.获取屏幕可用的宽高
window.screen.availHeight
window.screen.availWidth
8.获取元素的上边框
.clientTop
.clientLeft
9.获取子元素到父元素边界的距离
.offsetTop
.offsetLeft
二.jquery获取宽高
$(window).height() // 获取浏览器显示区域（可视区域）的高度
$(window).width() // 获取浏览器显示区域（可视区域）的宽度
$(document).height() // 获取页面的文档高度
$(document).width() // 获取也面的文档宽度
$(document.body).height() // 浏览器当前窗口文档body的高度
$(docuemtn.body).width() // l浏览器当前窗口文档body的宽度
$(document).scrollTop() // 获取滚动条到顶部的垂直高度（网也被卷起的高度）
$(document).scrollLeft() // 获取滚动条到左边的距离
$(obj).width() // 获取或设置元素的宽度
$(obj).height() // 获取或设置元素的高度
obj.offset().top // 某个元素的上边界到body最顶部的距离（在元素不包含滚动条的情况下）
obj.offset().left // 某个元素的左边界到body最左边的距离（在元素不包含滚动条的情况下）
注： 如果元素包含滚动条，则着两个值分别宝石当前元素的上/左边界到它的父级的上/左边界的偏移量
