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闭包中的循环绑定处理程序
Nov 09 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
在webstorm中配置less的方法详解
Sep 25 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
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python单链表的简单实现方法
2014/09/23 Python
Python实现基本线性数据结构
2016/08/22 Python
Python 实现链表实例代码
2017/04/07 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python包的导入方式总结
2021/03/02 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
经济系大学生求职信
2013/10/01 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
毕业大学生自荐信
2014/06/17 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
三八活动策划方案
2014/08/17 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书