• Width & Height

  Width 与 Height 获取方法相同，下面以 Height 为例：

  • Window height

    // window height
    // 含 scrollbar
    window.document.documentElement.clientHeight;
    // 不含 scrollbar，与 jQuery 行为一致
    window.innerHeight;

  • Document height

    // jQuery
    $(document).height();
    // Native
    const body = document.body;
    const html = document.documentElement;
    const height = Math.max(
      body.offsetHeight,
      body.scrollHeight,
      html.clientHeight,
      html.offsetHeight,
      html.scrollHeight
    );

• • Position

    获得匹配元素相对父元素的偏移

    // jQuery
    // Native
    { left: el.offsetLeft, top: el.offsetTop }

  • Offset

    获得匹配元素相对文档的偏移

    // jQuery
    $el.offset();
    // Native
    function getOffset (el) {
      const box = el.getBoundingClientRect();
      return {
        top: box.top + window.pageYOffset - document.documentElement.clientTop,
        left: box.left + window.pageXOffset - document.documentElement.clientLeft
      }
    }

• Scroll Top

获取元素滚动条垂直位置。

  // jQuery
  $(window).scrollTop();
  // Native