JavaScript计算屏幕上元素位置

鼠标事件的event对象的属性

clientX: 设置或获取鼠标当前位置和浏览器窗口中当前可见区域的最左端之间的距离(不包括页面滚动距离)。

clientY: 设置或获取鼠标当前位置和浏览器窗口中当前可见区域的最顶端之间的距离(不包括页面滚动距离)。

screenX: 设置或获取鼠标当前位置和整个电脑屏幕最左端之间的距离(不包括页面滚动距离)。

screenY: 设置或获取鼠标当前位置和整个电脑屏幕最顶端之间的距离(不包括页面滚动距离)。

说其他位置信息前先讲一下渲染模式的问题，IE对盒模型的渲染在Standards Mode和Quirks Mode有很大差别，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式[1]。

可以通过下面这个函数获取当前文档元素(从qqbanner摘过来的，请原谅我这偷学者吧) ：

function getDocEle() {
    return document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;
} 

准确获取网页当前可视区域的宽高、网页的宽高、网页滚动的距离 的代码，引自[2]

if(document.compatMode == "BackCompat"){
        cWidth = document.body.clientWidth;
        cHeight = document.body.clientHeight;
        sWidth = document.body.scrollWidth;
        sHeight = document.body.scrollHeight;
        sLeft = document.body.scrollLeft;
        sTop = document.body.scrollTop;
}
else{ //document.compatMode == "CSS1Compat"
        cWidth = document.documentElement.clientWidth;
        cHeight = document.documentElement.clientHeight;
        sWidth = document.documentElement.scrollWidth;
        sHeight = document.documentElement.scrollHeight;
        sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
        sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

clientWidth: 浏览器窗口中当前可见区域宽度（即浏览器窗口的宽度），不包滚动条等边线，会随窗口的显示大小改变。

clientHeight: 浏览器窗口中当前可见区域高度（即浏览器窗口的高度），不包滚动条等边线，会随窗口的显示大小改变。

scrollWidth: 是当前网页的实际内容的宽，不包括边线宽度，会随对象中内容的多少改变[3]，但不会随当前浏览器窗口的大小改变。

scrollHeight: 是当前网页的实际内容的宽，不包括边线高度，会随对象中内容的多少改变，但不会随当前浏览器窗口的大小改变。

scrollLeft: 浏览器当前水平方向滚动的距离。

scrollTop: 浏览器当前垂直方向滚动的距离。

下面这四个属性，与渲染模式无关。

offsetWidth: 是对象的宽，包括边线宽度，会随对象中内容的多少改变。

offsetHeight: 是对象的宽，包括边线高度，会随对象中内容的多少改变。

offsetLeft: 返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。一般是对象顶端相对于整个文档的左端的距离，若为绝对定位，且外部有relative元素（注意此元素padding或者border-width大于0时情况），则返回其距离此元素的距离（包括页面滚动的距离，如果页面布局不变，只是滚动滚轮的话，这个值是不变的）。

offsetTop: 返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。一般是对象顶端相对于整个文档的顶端的距离，若为绝对定位，且外部有relative元素，则返回其距离此元素的距离（同offsetLeft)。

引用文章

[1]http://www.cnitblog.com/yemoo/archive/2007/10/11/34713.html

[2]http://www.css88.com/archives/1767

[3]http://www.cnblogs.com/kakaxu/archive/2007/11/04/948938.html