获取html元素在页面上的坐标,用js获取页面中某个元素在浏览器可视窗口中的坐标(位置)...

getBoundingClientRect

这个函数可以获取元素到浏览器视窗知个位置的值, 注意是浏览器不是页面

如果想取到页面的距离如:左边或顶部有滚动条滚动进去的情况就要自己加对应的下面的卷进去的值啦document.documentElement.scrollTop

document.documentElement.scrollLeft

可以通过这个函数来获取obj.getBoundingClientRect()这个函数的返回值是一个对象，这个对象的属性有(top,left,right,bottom,width,height;)

top元素顶边到浏览器顶边的距离

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

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

bottom元素底边到浏览器顶边的距离

width元素的宽度

height元素的高度

兼容性

ie5以上都能支持，但是又一点点地方需要修正一下，

IE67的left、top会少2px,并且没有width、height属性。

函数

下面再给出一个原函数扩展兼容的原生写法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的滚动条下面不在可视范围内也可以取到值