javascript之元素绝对定位

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

 

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

 

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

 

下面是js的源代码: 

《javascript之元素绝对定位》《javascript之元素绝对定位》获取纵坐标 

1 //获取纵坐标
2 function getTop(e){ 3     var offset=e.offsetTop; 4     if(e.offsetParent!=null) 5         offset+=getTop(e.offsetParent); 6     return offset; 7 }

《javascript之元素绝对定位》获取横坐标

1 //获取横坐标
2 function getLeft(e){ 3     var offset=e.offsetLeft; 4     if(e.offsetParent!=null) 5         offset+=getLeft(e.offsetParent); 6     return offset; 7 }

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

 

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

《javascript之元素绝对定位》

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

 

 

    原文作者:gcfeng
    原文地址: http://www.cnblogs.com/yjfengwen/archive/2012/09/01/javascript.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞