Question

如何获取网页中某一元素相对文档的位置？

是获取网页元素相对整个文档、而不是浏览器窗口的位置。我想调用window.scrollTo()函数，所以需要文档坐标。

Answer 1

　　判定一个元素的尺寸和位置的最简单的方法是调用它的getBoundingClientRect()方法。返回一个left、top(坐上角)right、bottom(右下角)，height、width(ie中没有，但可以用right-left、bottom-top得到)，其返回的坐标包含元素的边框和内边距，但不包含元素的外边距。

　　如果浏览器不支持getBoundingClientRect()，则可以用HTML元素的只读属性offsetWidth、offsetHeight以CSS像素返回它的屏幕尺寸(只包含边框和内边距)

追问

我需要的是获取元素在整个文档中的位置，而这个元素不一定就在页面视窗中显示了出来。用getBoundingClientRect（）方法获取的left，top值是元素左上角顶点相对于整个HTML文档的坐标吗？另外，我暂时是用
function getElementPosition(e){
var x=0,y=0;
while(e!=null){
x+=e.offsetLeft;
y+=e.offsetTop;
e=e.offsetParent;}
return{x:x,y:y};}
据说这个函数不能在有滚动条时使用，但我使用正常啊？

追答

console.log(document.compatMode); //得到当前浏览器的模式，是标准的还是怪异
function getScrollOffset(w) {
var w = w || window;
if(w.pageXOffset != null) return {x:w.pageXOffset,y:w.pageYOffset};
if(document.compatMode == 'CSS1Compat') //这两种，针对ie的，这种是ie下的标准模式
return {x:w.document.documentElement.scrollLeft,y:w.document.documentElement.scrollTop};//ie8或之前的，代表文档的根节点
return {x:w.document.body.scrollLeft,y:w.document.body.scrollTop}; //怪异模式
}
function getViewportSize(w) {
var w = w || window;
if(w.innerWidth != null) return {x:w.innerWidth,y:w.innerHeight}; //高度为可视区的高度，不包括浏览器的工具、菜单栏和标签页
if(document.compatMode == 'CSS1Compat') return {x:w.document.documentElement.clientWidth,y:w.documentElement.clientHeight};
return {x:w.document.body.clientWidth,y:w.document.body.clientHeight};
}
function ch() {
var obj1 = getScrollOffset();
var obj2 = getViewportSize();
alert('滚动条的横纵坐标为：' +obj1.x+''+obj1.y);
alert('当前窗口的尺寸为：' +obj2.x+''+obj2.y);
}

看看上面的代码

追问

那么一个不在视窗内的元素用getBoundingClientRect（）方法获取的坐标是相对于浏览器左上角的坐标还是整个文档的坐标？关键是这个元素不在浏览器显示范围内啊，我怎么获取它的两种坐标：视窗的和文档的？