js获取浏览器中各种宽、高、偏移值

[mrdndragon]

本文中提及的都是一些简单易懂但平时容易忽略的JS属性，我已全部验证。现在整理出来供大家查阅，如有错误，欢迎指正。

width：

clientWidth：对象实际内容的宽度，不包含边线，最大不超过视口宽度
offsetWidth：对象实际宽度，包含边线，最大不超过视口宽度
scrollWidth：对象实际宽度，不包含边线，可超过视口宽度

height：（都可超过视口高度）

clientHeight：对象实际内容的高度，不包含边线
offsetHeight：对象实际高度，包含边线
scrollHeight：对象实际高度，不包含边线。如果对象为body，大于视口时为实际高度，小于视口时为视口高度

分辨率宽高：

window.screen.width：屏幕分辨率宽度
window.screen.height：屏幕分辨率高度
window.screen.availWidth：屏幕工作区宽度
window.screen.availHeight：屏幕工作区高度（不包含windows底边栏）

滚动距离：

scrollTop：对象被卷去的高度
scrollLeft：对象被卷去的宽度

偏移值：

event.clientX：相对文档的横向偏移值
event.clientY：相对文档的纵向偏移值
event.offsetX：相对当前对象的横向偏移值
event.offsetY：相对当前对象的纵向偏移值
offsetLeft：相对父元素的横向偏移值
offsetTop：相对父元素的纵向偏移值
window.screenTop：浏览器相对于屏幕左上角的横向偏移值
window.screenLeft：浏览器相对于屏幕左上角的纵向偏移值

边线： 滚动条和边框

[mmmaming]

补充一点，今天fix bug的时候发现的。
offsetTop
此属性可以返回距离指定元素最近的采用定位（position属性值为fixed、relative或者absolute）父级元素，如果父级元素中没有采用定位的元素，则返回body对象的引用。