用过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. 【jQuery+html】JS如何在html页面获取PHP输出的变量

    如题:JS如何获取php输出到模板HTML的变量呢? 废话不多说,自己看. aa.html <!-- 前提在HTML文件中--> <script type="text/ja ...

  2. 非super user管理会话

    在gp中取消或者中断某个用户的超长时间或者SQL存在问题的会话.假设无法拥有超级用户将无法运行该类操作.   首先我们创建两个用户t1.t2,而且使用t1登录到数据库. [gpadmin@wx60 ~ ...

  3. JNI调用之本地库文件的安装

    在进行JNI调用的时候.是由java的本地接口调用本地库文件来完毕的,可是本地库文件须要放置到指定位置.JNI接口才干调用到,这个路径是由JVM的系统变量"java.library.path ...

  4. 金软PDF转换(x-PDFConper)

    一.产品概述 金软PDF转换(x-PDFConper)软件产品是一款能够在手机.平板电脑等移动终端设备上.能够浏览MS Office 的Word.Excel.PowerPoint.PDF 等四种格式文 ...

  5. MFC总结之CListCtrl用法及技巧(一)

    本文根据本人在项目中的应用,来谈谈CListCtrl的部分用法及技巧.当初学习时,查了很多资料,零零碎碎的作了些记录,现在主要是来做个总结,方便以后查阅.主要包括以下十三点内容:基本操作.获取选中行的 ...

  6. 让你的jenkins能当奴隶主---说说几种Jenkins build框架

    近期又有几个朋友看了俺的文章询问.怎样让Jenkins能做到分布式.我解释了非常久,发现这也是个非常好的topic,就来博客继续念叨念叨. 这个非常easy,所以这篇文章也就介绍简单点. 首先说下Je ...

  7. C#位操作

    一.原码与补码 在计算机系统中,数值一律用补码来存储(表示).主要原因:使用补码,可以将符号位和其他位统一处理:同时减法也可按加法来处理.另外,两个补码表示的数相加时,如果最高位(符号位)有进位,则进 ...

  8. Atitit.软件gui按钮and面板---os区-----linux windows搜索文件 文件夹

    Atitit.软件gui按钮and面板---os区-----搜索文件 1. Find 1 2. 寻找目录 1 3. 2. Locate// everything 1 4. 3. Whereis (wi ...

  9. Typeface-为自定义字体提供字体内存缓存

    Android 上自定义字体的代码一般如下: TextView textview = (TextView) findViewById(R.id.your_referenced_textview); / ...

  10. cocos2d-x实例学习之常用类及其概要作用

    CCLayer,CCScene CCLayer类对应cocos2d-x引擎里的布景.每个游戏场景中都可以有很多层,每一层负责各自的任务,例如专门负责显示背景.专门负责显示道具和专门负责显示人物角色等. ...