技术分享 如何获取Dom元素的X/Y坐标(1)

当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。

获取Dom元素的X/Y坐标

现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下——注册鼠标移动事件——捕获鼠标正键抬起——注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：如何获取一个Dom元素的坐标。

当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。

首先认识一下getBoundingClientRect方法，标准语法为：

oRect=object.getBoundingClientRect();  
 

Dom节点调用该方法可返回一个ClientRect类型的对象，该对象有四个属性值：top、left、right、bottom，表示了该节点相对于可视浏览器可视区域的左上角位置的坐标，看图就能好理解：

坐标说明图1

补充一下，如果当前的元素已经超出可视区域，依然按照可视区域的左上角位置的坐标来计算，如图2

坐标说明图2

这样就可以简单的获取Dom元素在可视区里的X/Y坐标（通过left和top属性）。最后在计算上页面滚动条的偏移量就可以计算出元素在整个页面中的X/Y坐标了。页面滚动偏移量的计算在不同浏览器下有所不同，不过我们可以借鉴YUI里面方法，设计一个通用的方式：

scrollLeft=Math.max(document.documentElement.scrollLeft,  
 
document.body.scrollLeft);  
 
scrollTop=Math.max(document.documentElement.scrollTop,  
 
document.body.scrollTop);  

在W3C标准下document.body.scrollTop和document.body.scrollLeft都为0，所以采用了上面兼容的方式获取页面滚动条的偏移量。