innerWidth outerWidth

• innerWidth: 在移动端是整个视图的大小，而不是布局大小，布局大小 = 视图大小 - 顶部大小(wifi\时间那个头部)
• outerWidth: 有兼容性问题，尽量少用，outerWidth在部分浏览器中是整个窗口的大小，而在chrome是视图大小

获取浏览器视口大小

• 在pc端document.documentElement是viewport视图，在移动端是布局视口（相当于去掉顶部的wifi、时间那个头部）

  getViewportSize(){
      var pageWidth = window.innerWidth,
      pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
          if (document.compatMode == "CSS1Compat"){
              pageWidth = document.documentElement.clientWidth;
              pageHeight = document.documentElement.clientHeight;
          }
          else {
              pageWidth = document.body.clientWidth;
              pageHeight = document.body.clientHeight;
          }
      }
  }

客户区大小

• clientWidth: 元素内容区宽度 + 左右内边距宽度
• clientHeight: 元素内容区高度 + 上下内边距高度

  function getElementWidth(){
      let w
      if(document.compatMode == "CSS1Compat"){
          w = document.documentElement.clientWidth
      }
      else{
          w = document.body.clientWidth
      }
  }
  
  function getElementHeight(){
      let h
      if(document.compatMode == "CSS1Compat"){
          h = document.documentElement.clientHieht
      }
      else{
          h = document.body.clientHieht
      }
  }

获取网页内容高度或宽度

• scrollWidth: 元素内容的总宽度
• scrollHeight: 元素内容的总高度
• scrollLeft: 被隐藏在内容区域左侧的像素数， 可以改变这个属性达到改变元素的滚动位置
• scrollTop: 被隐藏在内容区域上方的像素数，可以改变这个属性达到改变元素的滚动位置

  function getDocumentWidth(){
      let w
      if(document.compatMode == "CSS1Compat"){
          w = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
      }
      else{
          w = Math.max(document.body.scrollWidth, document.body.clientWidth)
      }
  }
  
  function getDocumentHeight(){
      let h
      if(document.compatMode == "CSS1Compat"){
          h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHieht)
      }
      else{
          h = Math.max(document.body.scrollHeight, document.body.clientHieht)
      }
  }

判断元素在页面中相对于视口的位置

function getBoundingClientRect(element){
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;
    
    if(element.getBoundingClientRect){
        if (typeof arguments.callee.offset != "number"){
            var scrollTop = document.documentElement.scrollTop;
            var temp = document.createElement("div");
            temp.style.cssText = "position:absolute;left:0;top:0;"; document.body.appendChild(temp);
            arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
            document.body.removeChild(temp);
            temp = null;
        }
        var rect = element.getBoundingClientRect();
        var offset = arguments.callee.offset;
        return {
            left: rect.left + offset,
            right: rect.right + offset,
            top: rect.top + offset,
            bottom: rect.bottom + offset
        };
    }
    else{
        var actualLeft = getElementLeft(element);
        var actualTop = getElementTop(element);
        return {
            left: actualLeft - scrollLeft,
            right: actualLeft + element.offsetWidth - scrollLeft,
            top: actualTop - scrollTop,
            bottom: actualTop + element.offsetHeight - scrollTop
        }
    }
}

获取网页可见区域的宽度或高度

• offsetWidth = scrollWidth + 左右滚动条 + 左右边框
• offsetHeihgt = scrollHeight + 上下滚动条 + 上下边框

获取元素相对父元素的位置

var l = box.offsetLeft

var t = box.offsetTop

var parent = box.offsetParent // 返回父元素

获取元素到body或者html的距离

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}

function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current. offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}