码迷,mamicode.com
首页 > Web开发 > 详细

js 获取元素在页面上的偏移量的最佳方式

时间:2015-04-12 22:23:51      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

使用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()方法。

 

参考:

http://javascript.info/tutorial/coordinates#element-coordinates-by-offsetparent  

  

  

  

js 获取元素在页面上的偏移量的最佳方式

标签:

原文地址:http://www.cnblogs.com/Tzhibin/p/4420537.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!