clientwidth innerWidth offsetWidth

clientWidth 在任何窗口系统中都是指用户内容能放置的空间

clientWidth 是每个 document 一个，一个窗口中可以放置多个 document，比如你用 frame 或 iframe 就可以放置多个 document，这相当于图形界面编程中的 MDI （多文档窗口应用，比如 Word, Excel 就可以同时打开多个文档）。

window.innerWidth能获取当前窗口的宽度(包含滚动条)，当浏览器宽度调整时，这个值也会跟着变化。

window.innerWidth在IE8浏览器是无效的。代替品-->$(window).width()

$(window).width()获取当前窗口的宽度(不包含滚动条).需要引用jquery.js文件，它是jquery方法。

浏览器和屏幕各种高度宽度

Javascript:

屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。

document.documentElement.clientWidth

document.documentElement.clientHeight

document.body.clientWidth //网页可视区域的宽度(body)

document.body.clientHeight //网页body内容的高度(body）

body的height:100%影响document.body.clientHeight的值

offsetWidth & offsetHeight 本身的宽高 + padding + border + 滚动条

document.body.offsetWidth //网页可见区域宽(body)，包括border、margin等

document.body.offsetHeight //网页可见区域宽(body)，包括border、margin等

document.body.scrollWidth //网页正文全文宽，包括有滚动条时的未见区域

document.body.scrollHeight //网页正文全文高，包括有滚动条时的未见区域

document.body.scrollTop //网页被卷去的Top(滚动条)

document.body.scrollLeft //网页被卷去的Left(滚动条)

window.screenTop //浏览器距离Top

window.screenLeft //浏览器距离Left

window.screen.height //屏幕分辨率的高

window.screen.width //屏幕分辨率的宽

window.screen.availHeight //屏幕可用工作区的高

window.screen.availWidth //屏幕可用工作区的宽

可视区域的宽，但是包含纵向滚动条的宽度（E8以及以下不支持）

window.innerWidth=width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度

可视区域的宽，包含工具条与滚动条窗口的宽度与高度（E8以及以下不支持）

window.outerWidth=width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

$(Window).scrollTop() //文档显示区滚动的高度

(Window).scroll(function(){……}） //窗口滚动时执行

$().offset() 当前元素距离body 的{top:xxx，left:xxx}

Jquery:

屏幕可视区域的宽高，不包括滚动条与工具条

$(window).width() //浏览器当前窗口可视区域宽度

$(window).height() //浏览器当前窗口可视区域高度

$(document).height() //浏览器当前窗口文档的高度

$(document.body).height(） //浏览器当前窗口文档body的高度

$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度包括border padding margin

$(document).width() //浏览器当前窗口文档对象宽度

$(document.body).width() //浏览器当前窗口文档body的宽度

$(document.body).outerWidth(true) //浏览器当前窗口文档body的总宽度包括border padding margin

offsetLeft & offsetTop

返回元素的X和Y坐标，相对于已定位元素/相对于文档

scrollWidth & scrollHeight

元素的内容区域+内边距+溢出内容的尺寸.

因此，如果没有溢出时，这些属性与clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

元素的滚动条的位置

scrollLeft和scrollTop都是可写的属性，通过设置它们来让元素中的内容滚动。