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 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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 $_ENV为空的原因分析
2009/06/01 PHP
php基础学习之变量的使用
2011/06/09 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
Bootstrap按钮组实例详解
2017/07/03 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python 抓取动态网页内容方案详解
2014/12/25 Python
python九九乘法表的实例
2017/09/26 Python
python中字符串的操作方法大全
2018/06/03 Python
基于python实现学生管理系统
2018/10/17 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
前台接待岗位职责
2013/12/03 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
校长四风对照检查材料
2014/09/27 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers