js获取网页高宽和event对象宽高

发现自己老搞混各种宽高，所以今天稍微整理一下：

网页高/宽

网页可见区域宽： 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

以上都是在W3C标准<!DOCTYPE html>的情况下，如果在旧的标准下，或者比较早的浏览器斑斑下，各个浏览器获取的高度就会产生一些区别了，若需要兼容旧版本浏览器，需要用兼容性写法：

例如,网页可视区域大小：

var w = document.documentElement.offsetWidth
      || document.body.offsetWidth;
var h = document.documentElement.offsetHeight
      || document.body.offsetHeight;

网页可见区域大小(包括边线) ：

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

网页正文全文大小：

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

下面是一张元素的宽高获取展示图：