js实现jquery的offset()方法实例
更新时间：2015年01月10日 10:14:53 投稿：shichen2014
这篇文章主要介绍了js实现jquery的offset()方法,实例分析了jquery的offset()方法原理与采用javascript实现的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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 (!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
//getOffset(a).top
//getOffset(a).left
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了原生JS实现加载进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
这篇文章主要介绍了JavaScript实现的仿新浪微博原生态输入字数即时检查功能,涉及javascript事件响应及字符串的遍历、转换、判断等相关操作技巧,需要的朋友可以参考下2017-09-09
javascript完整操作Table的增加行，删除行的列子大全
非常漂亮的js操作table行代码函数。比较方便2008-10-10
css轻松实现整站样式互相切换。需要的朋友可以过来参考下，希望对大家有所帮助2013-10-10
JavaScript中Object、map、weakmap的区别分析
这篇文章主要介绍了JavaScript中Object、map、weakmap的区别分析，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
JSON一种简单的数据格式，比xml更轻巧，在JavaScript中处理JSON数据不需要任何特殊的API或工具包，下面为大家详细介绍下js中的json对象2014-10-10
JSON序列化与解析原生JS方法且IE6和chrome测试通过
JSON序列化与解析本文通过原生JS方法实现，IE6和chrome下均测试通过，喜欢的朋友可以尝试操作下2013-09-09
如何写一个通用的JavaScript效果库！(2/2)...2007-04-04
详解如何使用JavaScript中Promise类实现并发任务控制
在JavaScript中,Promise是一种用于管理异步操作的强大工具,但是,有时候需要更高级的控制,以限制同时执行的任务数量,以避免系统资源超负荷,本文将深入探讨JavaScript中的并发任务控制,并介绍如何创建一个自定义的Promise类——ConcurrentPromise2023-08-08
这篇文章主要给大家介绍了关于JS如何将指定的某个字符全部转换为其他字符的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论