用过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. 【phpstorm】破解安装

    1.使用前修改C:\windows\system32\Driver\hosts文件,将“0.0.0.0 account.jetbrains.com”添加到hosts文件中. 2. 浏览器打开 http ...

  2. 通过Forms身份验证设置不同页面的访问权限

    使用Forms身份验证的时候,如果允许注册页面可以匿名用户访问,其他所有页面只允许注册用户访问,我们可以如下设置web.config文件来达到上述的效果: 1.在“system.web”节点下,添加登 ...

  3. HDU 1823 Luck and Love 二维线段树(树套树)

    点击打开链接 Luck and Love Time Limit: 10000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  4. STL中map错误用法一例

    [GBK]0G's fans( me ) 13:34:26typedef struct _TX_DATA{ int len; unsigned char buff[0x100]; } TX_DATA, ...

  5. Android Studio Share Project On Github

    在Android Studio上将项目导入Github上: 1. 创建一个Project.点击VCS -> Enable Version Control Integration... 2.选择G ...

  6. Mysql 数据库数值类型详解

    MySQL 支持所有标准SQL 中的数值类型,其中包括严格数值类型(INTEGER.SMALLINT.DECIMAL 和NUMERIC),以及近似数值数据类型(FLOAT.REAL 和DOUBLE P ...

  7. linux下开发C语言需要安装的manpages手册

    linux下开发C代码需要安装的manpages: $ sudo apt-get install manpages$ sudo apt-get install manpages-dev$ sudo a ...

  8. 分享一个mysql 复杂查询的例子

    发布:脚本学堂/MySQL  编辑:thebaby   2013-08-23 09:37:37  [大 中 小] 有关mysql复杂查询的一个例子,正在学习mysql的朋友,可以作为一个参考. 在my ...

  9. Atitit.软件按钮与仪表盘(13)--全文索引操作--db数据库子系统mssql2008

    Atitit.软件按钮与仪表盘(13)--全文索引操作--db数据库子系统mssql2008 全文索引操作 4.全文索引和like语句比较 1 5.倒排索引 inverted index 1 2.SQ ...

  10. 查询ip地址归属地

    查询ip地址归属地方法: curl ip.cn/$ip 如果没有返回,试试地址写全: curl https://www.ip.cn/$ip 如: