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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
React.js绑定this的5种方法(小结)
Jun 05 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
php知道与问问的采集插件代码
2010/10/12 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php中smarty区域循环的方法
2015/06/11 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python逆向入门教程
2018/01/15 Python
python 实现A*算法的示例代码
2018/08/13 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
keras 多任务多loss实例
2020/06/22 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
运动会入场解说词
2014/02/07 职场文书
小学教师评语大全
2014/04/23 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2015年工会工作总结
2015/03/30 职场文书