js实现jquery的offset()
用过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()的更多相关文章
- js和JQuery中offset等属性对比
HTML: 内容在滚动条下面 <div id="outerDiv"> <div id="myDiv" class="myDiv&qu ...
- jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
- js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...
- JS和JQuery的总结
JS部分 一, 词法结构 区分大小 注意://单行 /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...
- JS和JQuery总结
目录目录 2js部分一.词法结构 1.区分大小写 2.注意 // 单行 /* 多行注释 */ 3.字面量(直接量 literal) 12 / ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- 原生JS替代jQuery的各种方法汇总
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
- js和jquery获取属性的区别
一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...
- js 和 jquery 里面几个获取宽高的调查
罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth() // offsetWidth obj.clientWidth = obj ...
随机推荐
- 基于olami开放语义平台的微信小程序遥知之源码实现
概述 实现一个智能生活信息查询的小秘书功能,支持查天气.新闻.日历.汇率.笑话.故事.百科.诗词.邮编.区号.菜谱.股票.节目预告,还支持闲聊.算24点.数学计算.单位换算.购物.搜索等功能. 使用方 ...
- 摘:数据结构各种算法实现(C++模板)
目 录 1.顺序表. 1 Seqlist.h 1 Test.cpp 6 2.单链表. 8 ListNode.h 8 SingleList.h 10 test.cpp 20 3.双向链表. 22 No ...
- poi读取excel元素
Java读取excel元素 忽略元数据末尾回到原数据开始处 pom文件设置 <dependency><groupId>org.apache.poi</groupId> ...
- django-1.11.3 源码详解 -- 0001 django-admin.py 的调用逻辑
django-admin是django的命令行接口.可以用它来创建工程(startproject) .创建app(startapp).它里面又是怎么写的呢? 一.django-admin.py 的内容 ...
- C++代码优化方法总结
C++代码优化方法总结 优化是一个非常大的主题,本文并不是去深入探讨性能分析理论,算法的效率,况且我也没有这个能力.我只是想把一些可以简单的应用到你的C++代码中 的优化技术总结在这里,这样,当你遇到 ...
- node.js 连接 mysql
var mysql = require("mysql"); var connection = mysql.createConnection({ host: '127.0.0.1', ...
- vim手记
1.normal 模式进入edit模式 i(a,o),进入 command 模式 :,回到normal模式Esc(ctrl+c,ctrl+[)2.help urs_toc 进入帮助文档目录,退出目录: ...
- Struts2的OGNL遍历数组、List、简单的Map
一.简介 <s:iterator />可以遍历 数据栈里面的任何数组,集合等等 在使用这个标签的时候有三个属性值得我们关注 1. value属性:可选的属性,value属性是指一 ...
- spring-boot 集合mybatis 的分页查询
spring-boot 集合mybatis 的github分页查询 一.依赖包 <!-- mysql 数据库驱动. --> <dependency> <groupId&g ...
- linux udhcpc 后无法自动设置网卡ip
arm 主板用 udhcpc 获取租赁的空闲的ip后,并没有直接设置在网卡上. 查了一下相关原因,是因为虽然已经获取了ip, 但是并没有通过脚本去设置这个IP. 在 busybox 里面有相关的脚本要 ...