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 14 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
js数组的基本使用总结
Jan 18 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注释实例技巧
2008/10/03 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP加密解密类实例分析
2015/04/20 PHP
php验证码生成代码
2015/11/11 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
Javascript中的数学函数
2007/04/04 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
python中遍历文件的3个方法
2014/09/02 Python
Python中extend和append的区别讲解
2019/01/24 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
高中生学习计划书
2014/09/15 职场文书
公司员工安全协议书
2014/11/21 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
先进工作者申报材料
2014/12/23 职场文书
未中标通知书
2015/04/17 职场文书
课题研究阶段性总结
2015/08/13 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang