// 获取元素到文档区域的坐标
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再加减左右距离即可*****