原生js实现offset方法

写个程序换个饼

于 2020-03-26 09:43:51 发布

阅读量629

点赞数

CC 4.0 BY-SA版权

分类专栏：经验总结文章标签： javascript

本文链接：https://blog.youkuaiyun.com/iteye_17835/article/details/105111114

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在为 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);
	}
}
// 执行offse

最低0.47元/天解锁文章