获取元素 在网页中的 坐标

1. 获取 网页真实内容 高度

• // 获取 网页真实内容 高度
  function getScrollHeight(){  
      return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);  
  }

   

2. 获取 网页真实内容 宽度

• // 获取 网页真实内容 宽度
  function getScrollWidth(){  
      return Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);  
  }

 

3. Element.offsetLeft

• 当前元素左上角相对于 Element.offsetParent 节点的水平位移，单位为像素

 

4. Element.offsetTop

• 当前元素左上角相对于 Element.offsetParent 节点的垂直位移，单位为像素

3. 获取元素 在 网页 中的 坐标

方法1

• // 获取元素 在 网页 中的 坐标    Test Already.
  function getElementPosition(ele) {
      var left = 0;
      var top = 0;
      var p = ele;
      while (p !== null)  {
          left += p.offsetLeft;
          top += p.offsetTop;
          p = p.offsetParent;   // 遍历相对元素的坐标
      }
      
      var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
      var pageWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
      
      return {
          left: left,
          top: top,
          
          right: pageWidth - left - ele.offsetWidth,
          bottom: pageHeight - top - ele.offsetHeight
      };
  }

 

---

 方法2

• // 获取元素 在 网页 中的 坐标    Test Already.
  function posInPage(obj){
      var theXOffset = document.documentElement.scrollLeft ||    // 火狐 IE9及以下滚动条是HTML的
                       window.pageXOffset ||                     // IE10及以上 window.pageXOffset
                       document.body.scrollLeft;                 // chrome滚动条是body的
      
      var theYOffset = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      
      var theClient = obj.getBoundingClientRect();
      
      // 在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，需要做以下兼容
      var top2px = document.documentElement.clientTop;
      var left2px = document.documentElement.clientLeft;
      
      var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
      var pageWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
      
      return {
          top: theClient.top - top2px + theYOffset,
          left: theClient.left - left2px + theXOffset,
          
          bottom: pageHeight - (theClient.top - top2px + theYOffset) - obj.offsetHeight,
          right: pageWidth - (theClient.left - left2px + theXOffset) - obj.offsetWidth
      };
  }