使用原生js得到页面相关的正确参数

这是一篇总结性质的日志。目的是使用原生js得到页面的总宽度，高度，左上角坐标，鼠标落点的绝对和相对坐标。

需要兼容的浏览器有IE6，IE8，FF4，Chrome 10，Safari 5，Opera 11。

解释一下为什么不测试Chrome，Safari这些浏览器更早的版本。一是因为他们历代版本在这方面改动不大，基本向后兼容。二是，这些浏览器在中国占有率和使用率都太低了。

下面是总结：

目的：得到页面总宽度

document.body.scrollWidth：全部正确

document.documentElement.scrollWidth：全部正确

document.body.clientWidth：全部正确

目的：得到页面总高度

document.body.scrollHeight：除IE外都正确
document.documentElement.scrollHeight：全部正确
document.body.clientHeight：全部正确

看来同一批属性在高度和宽度问题上表现并不一致。

目的：得到窗口宽度

self.innerWidth：除IE系列都正确

document.documentElement.clientWidth：全部正确

目的：得到窗口高度

self.innerHeight

document.documentElement.clientHeight

测试结果同上，第二个全部正确

目的：得到窗口左上角绝对坐标Top

document.body.scrollTop：WebKit内核浏览器正确

document.documentElement.scrollTop：其他内核浏览器正确

这两个属性在所有浏览器里都有定义，只是一个正确另一个恒为0。用Math.max取值即可。

目的：得到窗口左上角绝对坐标Left

document.body.scrollLeft

document.documentElement.scrollLeft

结果同上。

目的：得到鼠标点击坐标相对窗口原点坐标X,Y

这个没什么争议，用event.clientX。

目的：得到鼠标点击坐标相对文档原点坐标X,Y

event.offsetX：除FF，其他都正确

event.pageX：除IE系列，全部正确

---------------------总结分割线-------------------------

page={
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight,
totalWidth:document.documentElement.scrollWidth,
totalHeight:document.documentElement.scrollHeight,
top:Math.max(document.body.scrollTop,document.documentElement.scrollTop),
left:Math.max(document.body.scrollLeft,document.documentElement.scrollLeft)
};

也许你发现网上其他类似的测试，得出的结论不太一样。可能其他测试结论种对某些值的检测用了更复杂的条件判断。他们不一定对，也不一定错，而我也只是在我所有的浏览器里做了测试，只保证他们在我的浏览器里值是统一的。

所以，结论仅供参考。

转载于:https://www.cnblogs.com/wocdev/archive/2011/04/22/2025183.html