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: 繼續(xù)遞歸父節(jié)點(diǎn)
    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);
  }
}

// 執(zhí)行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset(s_kw_wrap); // => Object {top: 181, left: 400}

function offset2(node) {
  var offest = {
    top: 0,
    left: 0
  };
  // 當(dāng)前為IE11以下, 直接返回{top: 0, left: 0}
  if (!node.getClientRects().length) {
    return offest;
  }
  // 當(dāng)前DOM節(jié)點(diǎn)的 display === 'node' 時(shí), 直接返回{top: 0, left: 0}
  if (window.getComputedStyle(node)['display'] === 'none') {
    return offest;
  }
  // Element.getBoundingClientRect()方法返回元素的大小及其相對(duì)于視口的位置。
  // 返回值包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對(duì)于視口的左上角位置而言的。
  // 返回如{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
  };
}

// 執(zhí)行offset
var s_kw_wrap = document.querySelector('#s_kw_wrap');
offset2(s_kw_wrap); // => Object {top: 181.296875, left: 399.5}