原生js实现offset方法

最新推荐文章于 2022-04-27 21:05:16 发布

原创

最新推荐文章于 2022-04-27 21:05:16 发布 · 649 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文记录了在为jTool提供offset方法时，通过递归和ClientRect两种方式的实现。详细介绍了这两种方法的工作原理，特别指出IE11以下浏览器不支持的部分。同时，讨论了getClientRects和getBoundingClientRect两个API的差异，并提供了在百度首页测试的方法。文章末尾，作者表达了对前端行业发展的情感，并推荐了一个表格组件gridManager。

在为 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}