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 相关文章推荐
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 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&&mysql)五
2006/10/09 PHP
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php通过字符串调用函数示例
2014/03/02 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
python关键字and和or用法实例
2015/05/28 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python字典对象实现原理详解
2019/07/01 Python
Python shutil模块用法实例分析
2019/10/02 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python类的动态绑定实现原理
2020/03/21 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
就业协议书怎么填
2014/04/11 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
班主任工作实习计划
2015/01/16 职场文书
华山导游词
2015/02/03 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
2016新年感言
2015/08/03 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书