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 ...
随机推荐
- brew install memcache get Error: Formulae found in multiple taps
本篇文章由:http://xinpure.com/brew-install-memcache-get-error-formulae-found-in-multiple-taps/ 安装环境: Mac ...
- C# 图片转换为base64
WebRequest webRequest = WebRequest.Create("验证码url"); WebResponse webResponse = webRequest. ...
- CentOS下安装和配置MySQL-JDK-Tomcat-Nginx(个人官网环境搭建手冊)
今天,又一次弄我的个人云主机的环境.准备运营自己用Java写的个人官网等站点. 服务器环境:阿里云CentOS 6.4位 包含以下脚本在内的绝大部分命令和脚本,都是我亲自运行过,靠谱的. 完整的&qu ...
- 5V系统和3.3V系统电平转换
在设计一个带MCU或者ARM系统电路时候,经常遇见MCU的VCC是3.3V,但是外围电路需要5V.有时候是反过来.虽然现在MCU的IO都声称支持TTL电平,但是我们谁也不想将MCU的IO口直接接上5V ...
- spring in action 8.1 使用Spring web flow
一.说明 Spring Web Flow是spring MVC的扩展,它支持基于流程的应用程序,他将流程的定义和实现流程行为的类和视图分离开来. 1.1 spring中配置web flow,目前需要在 ...
- 如何实现php异步处理
在实际生成环境下,php作为后台的接口服务器已经很常见,php当然具有它能作为后台服务器的优势之处,但是,在处理一些客户端并不关心的结果时,就显出它的弊端了---没有异步执行的机制.就比如我们想做一些 ...
- unity5, animation event
一,给导入的fbx动画添加animation event: 如下图,在双击状态机中的idle状态,打开右面的面板,点开Events项会出现一个时间轴,点击下方播放器的播放按钮或者拖动播放器时间轴上的红 ...
- IIS6 伪静态 IIS文件类型映射配置方法 【图解】
1.右键点击 要设置网站的网站 2.属性 -->主目录 -->配置--> 3.如右侧窗口,找到 .aspx 扩展名-->编辑-->复制 可执行文件的路径-->关闭 ...
- C++ 基类指针和子类指针相互赋值
首先,给出基类animal和子类fish [cpp] view plaincopy //======================================================== ...
- Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制
Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...