JavaScript 获取元素页面偏移量的三种方法详解

获取元素页面偏移量的方法汇总

在利用JavaScript开发交互效果时，经常需要获取特定元素在页面中的具体位置，例如实现提示框（tip）功能。计算偏移量主要有两种思路：一是直接获取元素相对于文档（document）的偏移量；二是先获取元素相对于视口（viewpoint）的偏移量，再叠加页面的滚动距离（scroll）。

方法一：基于offsetParent的递归计算

1. 获取相对于文档（document）的偏移量

function getOffsetSum(ele){
  var top= 0,left=0;
  while(ele){
    top+=ele.offsetTop;
    left+=ele.offsetLeft;
    ele=ele.offsetParent;
  }
  return {
    top:top,
    left:left
  }
}

该方法通过向上遍历元素的offsetParent属性，逐层累加偏移值，从而计算出元素相对于文档的总偏移量，即相对于整个页面的位置。

这种方法存在以下问题：

1）对于采用表格或内嵌框架（iframe）进行布局的页面，由于不同浏览器对元素渲染实现的差异，计算结果往往不够精确。

2）每次计算都需要逐级向上查找offsetParent，这种递归查找方式效率较低。

方法二：基于getBoundingClientRect与滚动量

2. 获取相对于视口（viewpoint）的偏移量并加上页面滚动量

function getOffsetRect(ele){
      var box=ele.getBoundingClientRect();
      var body=document.body,
        docElem=document.documentElement;
      //获取页面的scrollTop,scrollLeft(兼容性写法)
      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
      var clientTop=docElem.clientTop||body.clientTop,
        clientLeft=docElem.clientLeft||body.clientLeft;
      var top=box.top+scrollTop-clientTop,
        left=box.left+scrollLeft-clientLeft;
      return {
        //Math.round 兼容火狐浏览器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

此方法直接调用getBoundingClientRect()获取元素相对于视口的偏移坐标，然后加上页面的滚动距离，最后减去clientTop和clientLeft。需要注意的是，IE8及更低版本浏览器将(2,2)作为起点坐标，因此需要减去该起点值；而其他现代浏览器通常以(0,0)为起点。

getBoundingClientRect()方法支持IE,ff3+,safari4+,Orear9,5,Chrome.

方法三：兼容性综合处理

3. 兼容性综合写法

//获取元素相对于页面的偏移
function getOffset(ele){
  if(ele.getBoundingClientRect){
    return getOffsetRect(ele);
  }else{
    return getOffsetSum(ele);
  }
}

针对支持getBoundingClientRect()的浏览器，调用getOffsetRect()方法；对于不支持该方法的旧版浏览器，则回退使用getOffsetSum()方法，从而实现跨浏览器的兼容处理。

以上内容即为获取元素页面偏移量的完整总结，希望能对各位学习JavaScript有所帮助。