js的两种方法来获取文档区域元素的(水平和垂直)坐标

获取页面中元素相对于文档区域的水平和垂直坐标的两种方法及其比较在js控制元素移动的过程中，经常会用到获取页面中元素的坐标位置。这里主要总结了两种方法：第一，通过叠加元素对象的offsetLeft/offsetTop属性及其offsetParent(如果有的话)，在阅读第三版javascript高级编程的DOM部分时，我们知道要获取页面上某个元素的偏移量，需要将这个元素的offsetLeft和offsetTop添加到其offsetParent的同一个属性中，并循环直到根元素。因此，要获得元素到文档区域的坐标位置，我们只需要通过while循环连续获取offsetLeft/offsetTop of offsetParent，直到offsetParent=null。js的代码：复制代码如下： //获取元素到文档区域的坐标：函数get position(element){ var actuallleft=element。offsetleft，actualtop=元素。偏移量，当前=元素。offsetparent//获取元素//循环的offsetparent，直到根元素while (current！==null){ actualLeft=current . offsetleft；actual top=current . offset top；current=current.offsetParent}//返回包含左、上坐标的对象return {left:actual left，top : actual top }；}示例截图：

firebug下测试结果截图：(注意：其他浏览器已经通过测试！)9501.163.com

其次，getboundingclient方法由getboundingclient()方法实现，以获取页面中元素的左、上、右、下相对于浏览器窗口的位置。返回的是一个具有四个属性的对象：顶部、左侧、右侧和底部；这种方法原本是IE Only，但是得到了FF3.0和Opera9.5的支持，可以说在获取页面元素位置的效率上有了很大的提升。此外，该方法避免了使用while循环，而是直接获取数值，性能优于第一种方法，尤其是在复杂页面上。代码：复制代码如下： //获取元素到文档区的坐标：函数get position(element){ var DC=document，rec=element.getboundingclient()，_ x=rec.left，//获取元素相对于浏览器窗口的左、上坐标_ y=rec.top//将其添加到html或body元素的滚动距离中，作为元素相对于文档区域document _ x=DC . document element . scroll left | | DC . body . scroll left的坐标位置；_ y=DC . document element . scroll top | | DC . body . scroll top；返回{ left: _x，top : _ y }；}经过测试，这种方法得到的元素相对于文档的坐标大小与第一种方法得到的相同，但对于IE版本较低的浏览器来说有一些区别。注意：记得累加HTML(IE除外)或body(对于IE)元素的水平或垂直滚动距离！结论：上面已经描述了如何获得元素相对于文档区域的坐标位置。如果遇到相关问题，可以联系我或者直接评论。此外，要获得右侧坐标和底部坐标，您只需要将左侧坐标和顶部坐标的大小添加到元素本身的宽度(elem.offsetWidth)和高度(elem.offsetHeight)中。当然，offsetWidth和offsetHeight属性会计算元素的内部边距和边框，所以最好的方法是通过getBoundingClientRect获取。Ps: add，用这个方法返回对象的左右=元素宽度；底部-顶部=元素高度。您可以获得没有边框的元素本身的宽度和高度。