今天看到了口碑UED中Zhusun的一篇关于获取DOM元素在文档中的位置的文章，《获取Dom元素的X/Y坐标》，第一次知道了DOM元素还有一个getBoundingClientRect()方法可以使用来返回DOM元素的Top,Left,Right,Bottom。这个方法的具体用法和含义推荐看Zhusun的那篇文章。据他所说这个方法在某些浏览器还不兼容（FF2、Safari），所以本人从offsetParent这个方法出发，来获取DOM元素的X/Y坐标。

offsetParent有四个方法是比较常用的：offsetLeft，offsetTop，offsetWidth，offsetHeight。下面我来说明offsetLeft和offsetTop方法的含义。

 

offsetTop和offsetLeft分别是元素在offsetParent上下文中的水平和垂直偏移量，它在现代浏览器中都比较准确。但是ie6,ie7在计算的时候会多出2个像素的长度,大家可以使用下面提供的函数来测试。下面是封装的几个函数：

//获取DOM元素在可见区域的X坐标
function pageX(elem){
  //如果当前元素还存在offsetParent，就递归叠加，下面的同理
  return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
//获取DOM元素在可见区域的Y坐标
function pageY(elem){
  return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}
//获取DOM元素相对于parentNode的X坐标
function parentX(elem){
  //鉴于有些浏览器对于offsetParent指向不准确的进行判断是否跟元素的parentNode相等，下同。
  return elem.offsetParent == elem.parentNode ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
}
//获取DOM元素相对于parentNode的Y坐标
function parentY(elem){
  return elem.offsetParent == elem.parentNode ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
}

上面的几个函数在table里面测试在各个浏览器都基本相同（FF，Chrome，Safari，Opera，IE8），可是ie6和ie7会多出2个像素的长度。大家可以自己测试一下：测试页面。

offsetHeight和offsetWidth主要用于获取DOM元素潜在的高度和宽度，比如图片或者一些没有显示声明高度和宽度的DOM元素等等就非常适合。

同时附带一个非常有用的函数，就是用于获取DOM元素的最终样式的getStyle函数，它通过IE的currentStyle以及FF等浏览器的getComputedStyle方法来获取最终样式：

//注意：样式属性的书写格式必须是骆驼型，比如:font-size要写成fontSize
var getStyle = function(el, c){
  if (el.currentStyle) { //IE
    return el.currentStyle[c];
  } else if (window.getComputedStyle) { //W3C
    return window.getComputedStyle(el, null)[c];
  } else {
    return el.style[c];
  }
}

原文地址: 获得DOM元素X/Y坐标的几个函数