用过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. pageEncoding和ContextType区别

    http://blog.csdn.net/kerrywang/article/details/4454895 pageEncoding        在JSP标准的语法中,如果 pageEncodin ...

  2. Google发展史 Google十三年

    http://blog.csdn.net/terryzero/article/details/5910617 "1997年9月15日,Larry Page 和 Sergey Brin 正式注 ...

  3. 【算法剖析】寻找两个已序数组中的第k大元素

    1.问题描述 给定两个数组A与B,其大小分别为m.n,假定它们都是已按照增序排序的数组,我们用尽可能快的方法去求两个数组合并后第k大的元素,其中,1\le k\le(m+n).例如,对于数组A=[1, ...

  4. HDU 3746 数据结构之KMP

    pid=3746">点击打开链接 题意:给T组数据,每组一个字符串,问最少加入多少个字符能够使这个串变成一个子串连续出现的串 思路:利用KMP的next数组进行变换,next数组保存的 ...

  5. 基于Bootstrap的Asp.net Mvc 分页的实现(转)

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...

  6. 使用Open Live Writer写博客

    1. 下载安装软件 安装包路径http://openlivewriter.org/ 2.配置 打开软件后会提示你配置博客账号地址 3.安装代码高亮插件 下载插件源代码https://pan.baidu ...

  7. C union共用体

    共用体是一种特殊的数据类型,允许您在相同的内存位置存储不同的数据类型.您可以定义一个带有多成员的共用体,但是任何时候只能有一个成员带有值.共用体提供了一种使用相同的内存位置的有效方式. 共用体定义: ...

  8. Linux安装Scala步骤

    1.到官方下载tgz的安装包. http://www.scala-lang.org/download/ 注意:在最下面的Other Resources中 2.下载后将压缩包放在/usr/local目录 ...

  9. atitit.基于虚拟机的启动器设计 --java 启动器 java生成exe

    atitit.基于虚拟机的启动器设计 --java 启动器   java生成exe exe4j   vs  nativej 1. step1读取配置文件 1 1.1. regular mode   . ...

  10. atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

    atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...