这是一篇总结性质的日志。目的是使用原生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系列，全部正确
---------------------总结分割线-------------------------
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)
};
也许你发现网上其他类似的测试，得出的结论不太一样。可能其他测试结论种对某些值的检测用了更复杂的条件判断。他们不一定对，也不一定错，而我也只是在我所有的浏览器里做了测试，只保证他们在我的浏览器里值是统一的。
所以，结论仅供参考。
/**
* 获取元素的坐标点
* @param elementId 元素Id
* @returns 元素所在位置的坐标点
*/
function getElementPos(elementId)
{
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
var el = document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none')
{
return false;
}
var parent = null;
var pos = [];
var box;
if(el.getBoundingClientRect) //IE
{
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
return {x:box.left + scrollLeft, y:box.top + scrollTop};
}
else if(document.getBoxObjectFor) // gecko
{
box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
pos = [box.x - borderLeft, box.y - borderTop];
}
else // safari & opera
{
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if (parent != el)
{
while (parent)
{
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
{
pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;
}
}
if (el.parentNode)
{
parent = el.parentNode;
}
else
{
parent = null;
}
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode)
{
parent = parent.parentNode;
}
else
{
parent = null;
}
}
return {x:pos[0], y:pos[1]};
}