详解原生js实现offset方法

在为 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()的关系

1. 这两个方法的区别与当前的 display 相关， 当 display=inline 时， .getclientrects() 返回当前节点内每一行文本的 clientrect 对象数组， 此时数组长度等于文本行数。
2. 当 display != inline 时， .getclientrects() 返回当前节点的 clientrect 对象数组，此时数组长度为1.
3. .getboundingclientrect() 总是返回当前节点的 clientrect 对象， 注意这里是 clientrect 对象而不是对象数组。

提示

以上测试， 可以通过在百度首页执行进行测试， document.queryselect('#s_kw_wrap') 所获取到的节点为百度首页输入框

希望对大家的学习有所帮助，也希望大家多多支持。