详解原生js实现offset方法
在为jTool提供offset(获取当前节点位置）方法时，先后使用了两种方式进行实现，现整理出来以作记录。
前后共使用了两种方式实现了该方法，这里将这两种方法分别列出。
通过递归实现
functionoffset(element){
varoffest={
top:0,
left:0
};
var_position;
getOffset(element,true);
returnoffest;
//递归获取offset,可以考虑使用getBoundingClientRect
functiongetOffset(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
vars_kw_wrap=document.querySelector('#s_kw_wrap');
offset(s_kw_wrap);//=>Object{top:181,left:400}
通过ClientRect实现
functionoffset2(node){
varoffest={
top:0,
left:0
};
//当前为IE11以下,直接返回{top:0,left:0}
if(!node.getClientRects().length){
returnoffest;
}
//当前DOM节点的display==='node'时,直接返回{top:0,left:0}
if(window.getComputedStyle(node)['display']==='none'){
returnoffest;
}
//Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
//返回值包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了width和height外的属性都是相对于视口的左上角位置而言的。
//返回如{top:8,right:1432,bottom:548,left:8,width:1424…}
offest=node.getBoundingClientRect();
vardocElement=node.ownerDocument.documentElement;
return{
top:offest.top+window.pageYOffset-docElement.clientTop,
left:offest.left+window.pageXOffset-docElement.clientLeft
};
}
//执行offset
vars_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')所获取到的节点为百度首页输入框
希望对大家的学习有所帮助，也希望大家多多支持毛票票。