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 ...
随机推荐
- springmvc 日期解决方案(三)使用jackson
引入jar包: <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jac ...
- HQL的select new map ···语法
通常hibernate查询出的结果集是类似于 List<T> 或 List<Object[]> 的类型 类似于下面这个方法 public List<SfJmsfT> ...
- OpenCV iOS开发(一)——安装(转)
OpenCV是一个开源跨平台的的计算机视觉和机器学习库,可以用来做图片视频的处理.图形识别.机器学习等应用.本文将介绍OpenCV iOS开发中的Hello World起步. 安装 OpenCV安装的 ...
- C++的引用与const指针的关系以及各种传递方式
首先我们知道 const int *p 与 int const *p 是一样的,即 *p 是常量:而 int * const p 跟上面是不一样的,即 p 是常量:我们知道引用只是一个别名,与变量共享 ...
- AngularJS中的$apply
$apply()方法可以在angular框架之外执行angular JS的表达式,例如:DOM事件.setTimeout.XHR或其他第三方的库. 当仅仅使用Angular所提供的对象时,你不该过多的 ...
- Windows下ADB默认的5037port被占用,解决方式。
Windows下可能会因为系统版本号不一样的原因导致有的系统5037port被系统进程占用.导致ADB无法使用5037port,从而导致ADB不能打开.在eclipse上跑Android程序的时候显示 ...
- 查询ip地址归属地
查询ip地址归属地方法: curl ip.cn/$ip 如果没有返回,试试地址写全: curl https://www.ip.cn/$ip 如:
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- Lucene:基于Java的全文检索引擎简介 (zhuan)
http://www.chedong.com/tech/lucene.html ********************************************** Lucene是一个基于Ja ...
- Linux kernel 之 kobject
总听有人说 Linux kernel 拥有一团无比巨大看似杂乱无章其实有迹可循的链表,今天参考一下其他大牛的相关资料记录一下. kset 结构体 151 /** 152 * struct kset - ...