用过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. 基于olami开放语义平台的微信小程序遥知之源码实现

    概述 实现一个智能生活信息查询的小秘书功能,支持查天气.新闻.日历.汇率.笑话.故事.百科.诗词.邮编.区号.菜谱.股票.节目预告,还支持闲聊.算24点.数学计算.单位换算.购物.搜索等功能. 使用方 ...

  2. 摘:数据结构各种算法实现(C++模板)

    目  录 1.顺序表. 1 Seqlist.h 1 Test.cpp 6 2.单链表. 8 ListNode.h 8 SingleList.h 10 test.cpp 20 3.双向链表. 22 No ...

  3. poi读取excel元素

    Java读取excel元素 忽略元数据末尾回到原数据开始处 pom文件设置 <dependency><groupId>org.apache.poi</groupId> ...

  4. django-1.11.3 源码详解 -- 0001 django-admin.py 的调用逻辑

    django-admin是django的命令行接口.可以用它来创建工程(startproject) .创建app(startapp).它里面又是怎么写的呢? 一.django-admin.py 的内容 ...

  5. C++代码优化方法总结

    C++代码优化方法总结 优化是一个非常大的主题,本文并不是去深入探讨性能分析理论,算法的效率,况且我也没有这个能力.我只是想把一些可以简单的应用到你的C++代码中 的优化技术总结在这里,这样,当你遇到 ...

  6. node.js 连接 mysql

    var mysql = require("mysql"); var connection = mysql.createConnection({ host: '127.0.0.1', ...

  7. vim手记

    1.normal 模式进入edit模式 i(a,o),进入 command 模式 :,回到normal模式Esc(ctrl+c,ctrl+[)2.help urs_toc 进入帮助文档目录,退出目录: ...

  8. Struts2的OGNL遍历数组、List、简单的Map

    一.简介 <s:iterator />可以遍历 数据栈里面的任何数组,集合等等 在使用这个标签的时候有三个属性值得我们关注      1. value属性:可选的属性,value属性是指一 ...

  9. spring-boot 集合mybatis 的分页查询

    spring-boot 集合mybatis 的github分页查询 一.依赖包 <!-- mysql 数据库驱动. --> <dependency> <groupId&g ...

  10. linux udhcpc 后无法自动设置网卡ip

    arm 主板用 udhcpc 获取租赁的空闲的ip后,并没有直接设置在网卡上. 查了一下相关原因,是因为虽然已经获取了ip, 但是并没有通过脚本去设置这个IP. 在 busybox 里面有相关的脚本要 ...