如何用原生js封装jQuery中的offset方法

1.原理

这个方法是基于原生js中的 offsetParent 、offsetTop 、offsetLeft、clientLeft、clientTop 来完成的，在jQuery中这个元素是用来获取当前元素在当前视口的相对偏移。

clientLeft \ clientTop 指的是元素父元素左边框和上边框 （包括border和padding）

offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。

offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（不包括元素的边框和父容器的边框）。

function offset(curEle) {
	let par = curEle.offsetParent,
		//获取当前元素的父参照物（不一定是父元素）
		l = curEle.offsetLeft,
		//获取当前元素相对父元素左偏离
		t = curEle.offsetTop;
		//获取当前元素相对父元素上偏移
	while (par && par.tagName !== 'BODY') {
		//判断是否已经到了最外一层 并且判断父参照物存不存在
		l += par.clientLeft;
		//获得父元素的左边框
		t +=par.clienTop;
		//获得父元素的上边框
		l += par.offsetLeft;
		//获得元素距离父元素左偏移多少
		t += par.offsetTop;
		//获得元素距离父元素上偏移多少
		par = par.offsetParent;
	}
	return {
		top: t,
		left: l
	}
}

然而在标准的IE8中，offsetLeft \ offsetTop 会把父元素的边框也会算进去，所以我们需要做一些处理，

第一步，如何知道是不是IE8
我们可以在控制台输入 window.navigator.userAgent 会返回当前浏览器版本信息，
在Chrome 中返回的是
“Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36”

在IE8下返回的是
“Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)”
而 MSIE 8.0 代表的就是 IE8 也就是我们只需要判断这个字符中是否含有MSIE 8.0就可以了

function offset(curEle) {
	let par = curEle.offsetParent,
		//获取当前元素的父参照物（不一定是父元素）
		l = curEle.offsetLeft,
		//获取当前元素相对父元素左偏离
		t = curEle.offsetTop;
		//获取当前元素相对父元素上偏移
	while (par && par.tagName !== 'BODY') {
		//判断是否已经到了最外一层 并且判断父参照物存不存在
		if (!/MSIE 8\.0/.test(navigator.userAgent)){
			//利用正则表达式判断
			l += par.clientLeft;
			t += par.clientTop;
		}
		l += par.offsetLeft;
		//获得元素距离父元素左偏移多少
		t += par.offsetTop;
		//获得元素距离父元素上偏移多少
		par = par.offsetParent;
	}
	return {
		top: t,
		left: l
	}
}

这样我们就把这个方法封装完了，欢迎在评论区交流，谢谢大家