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


Posted in Javascript onApril 13, 2015

使用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有是帮助。

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
javascript中scrollTop详解
Apr 13 #Javascript
jQuery实现的在线答题功能
Apr 12 #Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 #Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 #Javascript
jQuery插件pagination实现分页特效
Apr 12 #Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 #Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 #Javascript
You might like
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
python删除文件示例分享
2014/01/28 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
django 中QuerySet特性功能详解
2019/07/25 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
会计学专业学生的求职信范文
2014/01/27 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
优秀志愿者感言
2015/08/01 职场文书
golang特有程序结构入门教程
2021/06/02 Python
Python数据处理的三个实用技巧分享
2022/04/01 Python