详解原生js实现offset方法
2017-06-15 15:52
876 查看
在为 jTool 提供 offset (获取当前节点位置)方法时, 先后使用了两种方式进行实现, 现整理出来以作记录。
前后共使用了两种方式实现了该方法, 这里将这两种方法分别列出。
通过递归实现
function offset(element) { var offest = { top: 0, left: 0 }; var _position; getOffset(element, true); return offest; // 递归获取 offset, 可以考虑使用 getBoundingClientRect function getOffset(node, init) { // 非Element 终止递归 if (node.nodeType !== 1) { return; } _position = window.getComputedStyle(node)['position']; // position=static: 继续递归父节点 if (typeof(init) === 'undefined' && _position === 'static') { getOffset(node.parentNode); return; } offest.top = node.offsetTop + offest.top - node.scrollTop; offest.left = node.offsetLeft + offest.left - node.scrollLeft; // position = fixed: 获取值后退出递归 if (_position === 'fixed') { return; } getOffset(node.parentNode); } }
// 执行offset var s_kw_wrap = document.querySelector('#s_kw_wrap'); offset(s_kw_wrap); // => Object {top: 181, left: 400}
通过ClientRect实现
function offset2(node) { var offest = { top: 0, left: 0 }; // 当前为IE11以下, 直接返回{top: 0, left: 0} if (!node.getClientRects().length) { return offest; } // 当前DOM节点的 display === 'node' 时, 直接返回{top: 0, left: 0} if (window.getComputedStyle(node)['display'] === 'none') { return offest; } // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。 // 返回值包含了一组用于描述边框的只读属性――left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。 // 返回如{top: 8, right: 1432, bottom: 548, left: 8, width: 1424…} offest = node.getBoundingClientRect(); var docElement = node.ownerDocument.documentElement; return { top: offest.top + window.pageYOffset - docElement.clientTop, left: offest.left + window.pageXOffset - docElement.clientLeft }; }
// 执行offset var s_kw_wrap = document.querySelector('#s_kw_wrap'); offset2(s_kw_wrap); // => Object {top: 181.296875, left: 399.5}
offset2() 函数中使用到了 .getClientRects() 与 .getBoundingClientRect() 方法,IE11 以下浏览器并不支持; 所以该种实现, 只适于现代浏览器。
.getClientRects()
返回值是 ClientRect 对象集合(与该元素相关的CSS边框),每个 ClientRect 对象包含一组描述该边框的只读属性――left、top、right 和 bottom,单位为像素,这些属性值是相对于视口的top-left的。
并包含 length 属性, IE11以下可以通过是否包含 length 来验证当前是否为IE11以上版现。
.getBoundingClientRect()
返回值包含了一组用于描述边框的只读属性――left、top、right 和 bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
.getBoundingClientRect() 与 .getClientRects()的关系
- 这两个方法的区别与当前的 display 相关, 当 display=inline 时, .getClientRects() 返回当前节点内每一行文本的 ClientRect 对象数组, 此时数组长度等于文本行数。
- 当 display != inline 时, .getClientRects() 返回当前节点的 ClientRect 对象数组,此时数组长度为1.
- .getBoundingClientRect() 总是返回当前节点的 ClientRect 对象, 注意这里是 ClientRect 对象而不是对象数组。
提示
以上测试, 可以通过在百度首页执行进行测试, document.querySelect('#s_kw_wrap') 所获取到的节点为百度首页输入框
希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 基于js中style.width与offsetWidth的区别(详解)
- js获取元素的偏移量offset简单方法(必看)
- JavaScript中offsetWidth的bug及解决方法
- JavaScript中style.left与offsetLeft的使用及区别详解
- javascript中offset、client、scroll的属性总结
- JavaScript中的getTimezoneOffset()方法使用详解
- js实现jquery的offset()方法实例
- Javascript 运动中Offset的bug解决方案
- javascript中style.left和offsetLeft的用法说明
- JS OffsetParent属性深入解析
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- JS中offset和匀速动画详解
相关文章推荐
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
- JS原生方法实现jQuery的ready()
- JS实现数字转换为货币汉字大写数字的方法详解
- JS原生方法实现jQuery的ready()
- 【JS】如何用原生JS实现jQuery的ready方法
- js实现跨域的几种方法的原理详解
- 原生Js实现简易烟花爆炸效果的方法
- JS原生方法实现jQuery的ready()
- js实现跨域的方法实例详解
- (一)原生JS实现 - 基本类方法
- 利用原生Js方法实现发送验证码倒计时
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- [转]原生JS-查找相邻的元素-siblings方法的实现
- js实现跨域的方法实例详解
- JavaScript Tag标签切换实现的几种方法 原生js + jquery
- JS实现数字转换为货币汉字大写数字的方法详解
- 原生js实现复制对象、扩展对象 类似jquery中的extend()方法
- 原生Js 两种方法实现页面关键字高亮显示(2)
- JS延时提示框实现方法详解
- js原生之scrollTop、offsetHeight和offsetTop等属性用法详解