js实现jquery的offset()方法实例


Posted in Javascript onJanuary 10, 2015

本文实例讲述了js实现jquery的offset()方法。分享给大家供大家参考。具体分析如下:

用过jQuery的offset()的同学都知道offset().top或offset().left很方便地取得元素相对于整个页面的偏移。

而在js里,没有这样直接的方法,节点的属性offsetTop可以获得该节点相对于父节点的相对偏移,但不能直接获得其绝对偏移,我们可用节点逐层递归向上来相加offsetTop来获得绝对偏移。

function getOffset(Node, offset) {

    if (!offset) {

        offset = {};

        offset.top = 0;

        offset.left = 0;

    }
    if (Node == document.body) {//当该节点为body节点时,结束递归

        return offset;

    }
    offset.top += Node.offsetTop;

    offset.left += Node.offsetLeft;
    return getOffset(Node.parentNode, offset);//向上累加offset里的值

}

 

使用时,则如:

var a = document.getElementById('a');

//getOffset(a).top

//getOffset(a).left

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
js中键盘事件实例简析
Jan 10 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 #Javascript
javascript获取四位数字或者字母的随机数
Jan 09 #Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 #Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
php 将excel导入mysql
2009/11/09 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
javascript 动态添加表格行
2006/06/22 Javascript
Javascript 不能释放内存.
2006/09/07 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python yield 小结和实例
2014/04/25 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
车间主管岗位职责
2013/11/14 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
爱的教育观后感
2015/06/17 职场文书
2019思想汇报范文
2019/05/21 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
导游词之临安白水涧
2019/11/05 职场文书