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

您可能感兴趣的文章:

• jQuery抛物线运动实现方法(附完整demo源码下载)
• 取得元素的左和上偏移量的方法
• js获取元素的偏移量offset简单方法(必看)