浏览器窗口内部域宽：window.innerWidth
浏览器窗口内部域高：window.innerHeight
可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后（不包括滚动条），用于显示网页的净宽高。也就是图中的可视区域+滚动条尺寸（滚动条包括横向和竖向），如果文档超出了可视区域，那么超出部分不包括在内。
如果想要获得不包括浏览器滚动条的宽度（也就是图中的可视区域），可以使用下面两种方法：
document.documentElement.clientWidth
document.documentElement.clientHeight
如果你仅仅是想获得body文档的高度（不包括滚动条的宽度），那么可以使用下面两种方法
文档域宽：document.body.clientWidth
文档域高：document.body.clientHeight
同时有些朋友不清楚body和documentElement的区别，网上找的资料如下：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement是整个节点树的根节点root，即<html> 标签；
另外，在没使用DTD情况即怪异模式BackCompat下：
body和documentElement两种方式相等。
在使用DTD情况即标准模式CSS1Compat下：
body表示的依然是文档的正常尺寸，但是documentElement确表示的和确和window一样。
如何获取DTD模式呢？
通过document.compatMode即可。
总结：
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。
scrollWidth=clientWidth，两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
元素的内容超过可视区，滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
最后还有一个完整的总结图
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
jQuery
获取浏览器显示区域的高度 ： $(window).height();
获取浏览器显示区域的宽度 ：$(window).width();
获取页面的文档高度 ：$(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内，默认TRUE
options.padding 是否把padding计算在内，默认false
options.margin 是否把margin计算在内，默认true
options.border 是否把边框计算在内，默认true
参考资料：
http://www.cnblogs.com/kongxianghai/p/4192032.html
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499832124d97d77b00706461f9daf1a390b75ade1000
http://www.cnblogs.com/lpshan/p/4432340.html
评论前必须登录