【记录】Javascript获取Dom元素位置
有时候项目中会用到用js获取元素位置来定位元素，其实也很简单
DOM的定义如下图
获取元素的位置属性可以通过
- HTMLElement.offsetLeft
- HTMLElement.offsetTop
但是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。所以我们要得到她的绝对位置，那么我们必须依次向上获取他的父元素的位置，然后获取它父元素的父元素的offersetLeft和offersetTop,一直递归到浏览器的整个画布横纵距离的时候，例如
/*获取元素的纵坐标*/
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null){
offset+=getTop(e.offsetParent);
}
return offset;
}
/*获取元素的横坐标*/
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null){
offset+=getLeft(e.offsetParent);
}
return offset;
}
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null){
offset+=getTop(e.offsetParent);
}
return offset;
}
/*获取元素的横坐标*/
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null){
offset+=getLeft(e.offsetParent);
}
return offset;
}
获取元素的绝对位置，无非是根据元素距浏览器左边(left)和顶部（top）,我们可以稍稍改变一下得到一方法
function getElemPos(obj){
var pos = {"top":0, "left":0};
if (obj.offsetParent){
while (obj.offsetParent){
pos.top += obj.offsetTop;
pos.left += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if(obj.x){
pos.left += obj.x;
}else if(obj.x){
pos.top += obj.y;
}
return {x:pos.left, y:pos.top};
}var pos = {"top":0, "left":0};
if (obj.offsetParent){
while (obj.offsetParent){
pos.top += obj.offsetTop;
pos.left += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if(obj.x){
pos.left += obj.x;
}else if(obj.x){
pos.top += obj.y;
}
return {x:pos.left, y:pos.top};
注:元素兼容Chrome,FireFox,IE8.0+,Safari
