Summary of js methods to get the offset of an element on the page_javascript skills

When using js to create effects, we often need to obtain the offset of an element on the page (such as the tip prompt box function). To obtain the offset, you can directly obtain the offset relative to the document, or you can obtain the offset relative to the viewport (viewpoint) plus the page scroll amount (scroll).

1. Get the offset relative to the document

function getOffsetSum(ele){
  var top= 0,left=0;
  while(ele){
    top+=ele.offsetTop;
    left+=ele.offsetLeft;
    ele=ele.offsetParent;
  }
  return {
    top:top,
    left:left
  }
}

By iterating offsetParent upward, the offset relative to the document can be calculated, that is, the offset relative to the page.

Problems with this method:

1) For pages using table and inline frame layouts, due to differences in the way different browsers implement elements, the results obtained are inaccurate.

2) Every time you need to search for offsetParent one level at a time, the efficiency is too low.

2. Get the offset relative to the viewport (viewpoint) plus the scroll amount (scroll) of the page

function getOffsetRect(ele){
      var box=ele.getBoundingClientRect();
      var body=document.body,
        docElem=document.documentElement;
      //获取页面的scrollTop,scrollLeft(兼容性写法)
      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
      var clientTop=docElem.clientTop||body.clientTop,
        clientLeft=docElem.clientLeft||body.clientLeft;
      var top=box.top+scrollTop-clientTop,
        left=box.left+scrollLeft-clientLeft;
      return {
        //Math.round 兼容火狐浏览器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

This method directly obtains the offset relative to the viewport through the getBoundingClientRect() method, plus the scroll amount of the page, minus clientTop, clientLeft (IE8 and lower browsers use (2,2) as the starting point coordinates , so you need to subtract the starting point coordinate from the value. Other browsers use (0,0) as the starting point coordinate).

The getBoundingClientRect() method supports IE, ff3, safari4, Orear9,5, Chrome.

3. Compatibility writing

//获取元素相对于页面的偏移
function getOffset(ele){
  if(ele.getBoundingClientRect){
    return getOffsetRect(ele);
  }else{
    return getOffsetSum(ele);
  }
}

For browsers that support the getBoundingClientRect() method, use the getOffsetRect() method, and for browsers that do not support it, use the getOffsetSum() method.

The above is the entire content of this article. I hope it will be helpful to everyone learning javascript.