javascript之元素绝对定位

元素定位，在javascript中算是一个经常用到的知识。之前因为涉及到而查过很多资料，这里算是一个总结。如有错漏，望指正!

 

要定位一个元素，比如div，那么先要获取这个元素结点，在javascript中，可以通过getElementById、getElementsByClassName、getElementByTagName等等一系列方法；而通过jquery，也可以通过id、class、标签或属性等等来获取。不过需要注意的是，javascript获取的是DOM结点，而jquery则是一个object对象，这点需要区别。

 

在数学中我们经常用到的是二维坐标（x、y）。在浏览器中也有这个二维坐标，所不同的是它的y轴向下，对应的是left、top。要在浏览器中定位一个元素结点，也是通过这两个属性。而要准确设置这两个值，我们需要找到一个基点，即参照点。参照原点（浏览器左上角）也可以，要看你是定位到哪里。如果你要定位到屏幕中间，那么直接用原点当然无可厚非。但是我们一般更经常遇到的是定位到某个结点的旁边，所以参照父节点会是一个不错的选择。

 

下面是js的源代码： 

//获取纵坐标
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;    
}

这个程序用了递归，为了防止函数名被修改，可以将里面的函数名用arguments.callee来代替。需要注意的是，此时不能设置position为float，否则结果会有偏差。

 

上面的offsetLeft可以理解为当前结点外边框到其上层结点内边距之间的距离，offsetTop同理。下图是这些距离的图形表示：

当然了， 如果想要简便些，可以用直接用jquery提供的方法。分别对应为：$(结点).offset().left、$(结点).offset().top。