用过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

js实现jquery的offset()的更多相关文章

  1. js和JQuery中offset等属性对比

    HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...

  2. jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

  3. js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

    1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...

  4. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  5. JS和JQuery总结

    目录目录    2js部分一.词法结构    1.区分大小写    2.注意   // 单行      /*  多行注释  */    3.字面量(直接量  literal)        12  / ...

  6. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  7. 原生JS替代jQuery的各种方法汇总

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  8. js和jquery获取属性的区别

    一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...

  9. js 和 jquery 里面几个获取宽高的调查

    罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth()  // offsetWidth obj.clientWidth = obj ...

随机推荐

  1. [hdu 4959]Poor Akagi 数论(卢卡斯数,二次域运算,等比数列求和)

    Poor Akagi Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  2. Android用http协议上传文件

    http协议上传文件一般最大是2M,比较适合上传小于两M的文件   [代码] [Java]代码   001import java.io.File;  002import java.io.FileInp ...

  3. Android SDK中 tools 工具介绍

    Android SDK包含了各种各样的定制工具,简介如下: Android模拟器(Android Emulator ) 它是在你的计算机上运行的一个虚拟移动设备.你可以使用模拟器来在一个实际的Andr ...

  4. JAVA中的抽象类与接口

    抽象类 abstract class 包含抽象方法的类,叫抽象类.而抽象的概念就是抽象出共同属性:成员变量和方法.所以抽象类可以有private等多种权限的成员变量和非abstract的成员方法.当然 ...

  5. REST开放接口生成文档工具之apidoc

    一.安装node.js环境 感谢阿里云,下载的链接http://npm.taobao.org/mirrors/node/latest-v6.x/ 二.安装apidoc npm install apid ...

  6. 【iOS开发-25】UIDevice查看系统信息,从一个问题開始怎样高速找到自己想要的属性和方法并看懂它

    如果须要解决的问题:写代码时遇到一种情况,就是须要推断iOS版本号,可能低版本号和高版本号须要增减一些代码,此时.怎样推断iOS版本号? (1)第一步.当然度娘.输入"iOS 推断系统版本号 ...

  7. OCR 识别原理

    https://mp.weixin.qq.com/s?__biz=MzA3MDExNzcyNA==&mid=402907292&idx=1&sn=889c4abcf576e24 ...

  8. ffff表单提交的那点事

    一.关于application/x-www-form-urlencoded等字符编码的解释说明 在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器 ...

  9. IOS基于XMPP协议开发--XMPPFramewok框架(三):用户注册

    接着上面说 用户注册是比较简单的,成功连接上服务器后,设置好JID,即可调用 [_xmppStream registerWithPassword:pwd error:&err] 进行注册 -( ...

  10. MySql图解给表添加外键

    关于外键约束的几种方式,请移步鄙人的另外一个博客中的博文  http://blog.csdn.net/hadues/article/details/52558184