这篇文章主要介绍原生js怎么实现offset方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联是专业的鄂伦春网站建设公司，鄂伦春接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行鄂伦春网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。
在为 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 对象而不是对象数组。
以上是“原生js怎么实现offset方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
