取得html控件对象的top,和left

最新推荐文章于 2023-04-14 20:52:41 发布

weixin_38170853

最新推荐文章于 2023-04-14 20:52:41 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lxxnet/archive/2006/09/05/495802.html

本文介绍了一种在复杂的DOM结构中精确获取元素位置的方法，特别是针对嵌套在其他容器内的元素。通过递归地获取偏移量，并将这些偏移量累加起来，可以准确地确定元素相对于浏览器视口的位置。

今天完善了一下ajax下拉选择框,在显示定位发现了一个小问题,所以备忘一下

一般情况要取得对象的离浏览器top和left只需要用objectID.offsetLeft和objectID.offsetTop就可以了
但如果该对象嵌套在其它容器(如div,table)里的话就不能直接这样取了,而要一个一个从里到外取,使用offsetParent循环取出直到nodeName不为body,最后再全都累加起来才是我们要的数据,例如有如下html代码:

< table >

< tr >

< td >< input id ="aa" type ="text" size ="40" >< a href ='#' onclick ="ShowSelectTable('aa')" > 选择 </ a ></ td >

</ tr >

</ table >

如果要得到aa的top和left就要取得
aa.offsetLeft
aa.offsetTop
        td.offsetLeft
        td.offsetTop
                table.offsetLeft
                table.offsetTop

思路清楚再看代码就清楚了:

// 取得要显示的X,Y坐标

function fGetXY(aTag)

{

var oTmp = aTag;

var pt = new Point(0,0);

{

pt.x += oTmp.offsetLeft;

pt.y += oTmp.offsetTop;

oTmp = oTmp.offsetParent;

alert(oTmp.nodeNames);

} while(oTmp.tagName!="BODY");

return pt;

}

// 存放x,y坐标

function Point(iX, iY)

{

this.x = iX;

this.y = iY;

}

ajax选择下拉框添加了几个内容:
添加显示框自动定位
添加设置分页大小
添加可自定义皮肤路径
修复字段为空值时错误

源码: http://www.cnblogs.com/lxxnet/archive/2006/09/02/493050.html

演示地址:(由于是免费空间,有时速度可能会很慢)
http://xweex.a124.47data.com/index.html

转载于:https://www.cnblogs.com/lxxnet/archive/2006/09/05/495802.html