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 ...
随机推荐
- 【jQuery+html】JS如何在html页面获取PHP输出的变量
如题:JS如何获取php输出到模板HTML的变量呢? 废话不多说,自己看. aa.html <!-- 前提在HTML文件中--> <script type="text/ja ...
- 非super user管理会话
在gp中取消或者中断某个用户的超长时间或者SQL存在问题的会话.假设无法拥有超级用户将无法运行该类操作. 首先我们创建两个用户t1.t2,而且使用t1登录到数据库. [gpadmin@wx60 ~ ...
- JNI调用之本地库文件的安装
在进行JNI调用的时候.是由java的本地接口调用本地库文件来完毕的,可是本地库文件须要放置到指定位置.JNI接口才干调用到,这个路径是由JVM的系统变量"java.library.path ...
- 金软PDF转换(x-PDFConper)
一.产品概述 金软PDF转换(x-PDFConper)软件产品是一款能够在手机.平板电脑等移动终端设备上.能够浏览MS Office 的Word.Excel.PowerPoint.PDF 等四种格式文 ...
- MFC总结之CListCtrl用法及技巧(一)
本文根据本人在项目中的应用,来谈谈CListCtrl的部分用法及技巧.当初学习时,查了很多资料,零零碎碎的作了些记录,现在主要是来做个总结,方便以后查阅.主要包括以下十三点内容:基本操作.获取选中行的 ...
- 让你的jenkins能当奴隶主---说说几种Jenkins build框架
近期又有几个朋友看了俺的文章询问.怎样让Jenkins能做到分布式.我解释了非常久,发现这也是个非常好的topic,就来博客继续念叨念叨. 这个非常easy,所以这篇文章也就介绍简单点. 首先说下Je ...
- C#位操作
一.原码与补码 在计算机系统中,数值一律用补码来存储(表示).主要原因:使用补码,可以将符号位和其他位统一处理:同时减法也可按加法来处理.另外,两个补码表示的数相加时,如果最高位(符号位)有进位,则进 ...
- Atitit.软件gui按钮and面板---os区-----linux windows搜索文件 文件夹
Atitit.软件gui按钮and面板---os区-----搜索文件 1. Find 1 2. 寻找目录 1 3. 2. Locate// everything 1 4. 3. Whereis (wi ...
- Typeface-为自定义字体提供字体内存缓存
Android 上自定义字体的代码一般如下: TextView textview = (TextView) findViewById(R.id.your_referenced_textview); / ...
- cocos2d-x实例学习之常用类及其概要作用
CCLayer,CCScene CCLayer类对应cocos2d-x引擎里的布景.每个游戏场景中都可以有很多层,每一层负责各自的任务,例如专门负责显示背景.专门负责显示道具和专门负责显示人物角色等. ...