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

使用js制作效果时，我们常常要获取某个元素在页面上的偏移量（例如tip提示框功能）。而获取偏移量可以直接获取相对于document的偏移量，也可以获取相对与视口的偏移量（viewpoint）加上页面滚动量（scroll）获得。
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,可以计算出相对于document的偏移量，也就是相对与页面的偏移量。
此方法的问题:
1）对于使用表格和内嵌框架布局的页面，由于不同浏览器实现元素方式的差异，得到的结果就不精确了。
2）每次都需要一级一级向上查找offsetParent，效率太低。
2.获取相对与视口的偏移量（viewpoint）加上页面的滚动量（scroll）

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 兼容火狐浏览器bugtop: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有是帮助。