js获取元素到文档区域document的(横向、纵向)坐标的两种方法

// 获取元素到文档区域的坐标 
function getPosition(element){ 
  var dc = document, 
  rec = element.getBoundingClientRect(), 
  x = rec.left, // 获取元素相对浏览器视窗window的左、上坐标 
  y = rec.top; 
  // 与html或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置 
  x += dc.documentElement.scrollLeft || dc.body.scrollLeft; 
  y += dc.documentElement.scrollTop || dc.body.scrollTop; 
  return { 
    left: x, 
    top: y 
  }; 
} 
注意：记得要累加上html(IE除外)或body(针对IE)元素的水平或垂直滚动距离！ 
结语：上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述，如遇到相关问题，可联系本人或直接发表评论，另外，对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可，当然offsetWidth、offsetHeight属性会计算元素的内边距、边框，所以最好的办法还是通过getBoundingClientRect方法来获取。ps：补充一点，利用该方法返回对象的right-left = 元素宽度；bottom-top = 元素高度。可以获取不带边框的元素本身的宽度和高度。

 

*****但相对canvas时，因为他的原点是画布的左上角，所以横纵坐标可以考虑用offsetTop和offsetLeft再加减左右距离即可*****