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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
apache php模块整合操作指南
2012/11/16 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Python GUI编程完整示例
2019/04/04 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
会计专业应届生求职信
2013/11/24 职场文书
母校寄语大全
2014/04/10 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL