使用js获取页面上某个元素在浏览器可见窗口中的坐标（位置）

如果想要获取到页面的距离，比如：如果左侧或者顶部有滚动条，则需要在下面添加相应的滚入值。该函数的返回值是一个对象。ie5以上都可以支持，但是还有几个地方需要修正。IE67的左侧和顶部会少2px，并且没有宽度和高度属性。比如元素还可以获取div滚动条下且不在可见范围内的值。

获取边界客户端矩形

该函数可以获取元素到浏览器窗口的位置值，注意浏览器不是页面

如果想要获取到页面的距离，比如：如果左侧或者顶部有滚动条，则需要在下面添加相应的滚入值。

document.documentElement.scrollTop
document.documentElement.scrollLeft

通过该函数可以获取Obj.getBoundingClientRect()。 该函数的返回值是一个对象。 该对象的属性为（上、左、右、下、宽、高；）

top 元素上边缘到浏览器上边缘的距离

left 元素左侧到浏览器左侧的距离

right 元素右侧到浏览器左侧的距离

底部元素的下边缘到浏览器上边缘的距离

width 元素的宽度

height 元素的高度

兼容性

ie5以上都可以支持，但是还有几个地方需要修正。

IE67的左侧和顶部会少2px，并且没有宽度和高度属性。

功能

以下是原生的写法，兼容原有功能的扩展

function getObjRect(obj) {
    if ('string' == typeof(obj)) {
        obj = document.getElementById(obj);
    }
    var ro = obj.getBoundingClientRect();
    //document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0
    ro.top = ro.top - document.documentElement.clientTop;
    //document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0
    ro.left = ro.left - document.documentElement.clientLeft;
    ro.Width = ro.width || ro.Right - ro.Left;
    ro.Height = ro.height || ro.Bottom - ro.Top;
    return ro
}

备注：只要元素不在display中：none； 样式，即可获得。 比如元素还可以获取div滚动条下且不在可见范围内的值。