vs2008 在div中如何获得panel的坐标因为需要做一个点击按钮时,改变panel的位置。

vs2008 在div中如何获得panel的坐标因为需要做一个点击按钮时,改变panel的位置。,第1张

通过javascript可以得到这个panel的坐标,考虑到兼容性问题,建议使用Jquery插件,里面的获取左边的方法如下:

var p = $("#panel");

var position = pposition();

positionleft;//这个是panel相对父元素左边的偏移

positiontop;//这个是panel相对父元素顶部的偏移

jquery给一个DIV设置坐标也就是设置left和top的距离。

具体举例如下:

1、定义页面中的div

<div id="div1" >测试设置坐标</div>

2、编写jquerry脚本设置div的postion属性

// 获取div1对象

var d = documentgetElementById('div1');

// 设置position属性为绝对absolute

dstyleposition = "absolute";

// 设置left像素为100px

dstyleleft = '100px';

//设置top像素为200px

dstyletop ='200px';

或者也可以定义坐标传入以下函数:

//定义函数placeDiv,两个入参:x_pos和y_pos

function placeDiv(x_pos, y_pos) {

//获得div1这个dom对象

var d = documentgetElementById('div1');

// 设置position属性为绝对absolute

dstyleposition = "absolute";

//设置left像素为x_pos px

dstyleleft = x_pos+'px';

//设置top像素为y_pos px

dstyletop = y_pos+'px';

}

给个HTML和CSS文件你自己看,就能明白HTML的坐标是什么样的了。HTML文件用CSS控制定位的坐标相当于你打开附件看到的样子,不过没有显示出来而已。当然附件只画出在绝对定位情况下 width: 1000px; height: 1000px;  的坐标,更大范围的坐标没有画出来。

下载附件,然后打开就有了。

function GetObjWHLT(obj){

var objWHLT={left:0,top:0,width:0,heigth:0};

var nLt=0,nTp=0,offsetParent = obj;

while (offsetParent!=null && offsetParent!=documentbody){

nLt+=offsetParentoffsetLeft;

nTp+=offsetParentoffsetTop;

if(jDocbrowserisMsie && jDocbrowserversion!="60"){

parseInt(offsetParentcurrentStyleborderLeftWidth)>0nLt+=parseInt(offsetParentcurrentStyleborderLeftWidth):"";

parseInt(offsetParentcurrentStyleborderTopWidth)>0nTp+=parseInt(offsetParentcurrentStyleborderTopWidth):"";

}

offsetParent=offsetParentoffsetParent;

}

objWHLTleft = nLt;

objWHLTtop = nTp;

objWHLTwidth = objoffsetWidth;

objWHLTheigth = objoffsetHeight;

return objWHLT;

}

调用:

var obj=documentgetElementById("DIV的ID");

var tempPos = GetObjWHLT(obj);

x=tempPosleft;//离左边的距离

y=tempPostop;//离上面的距离

以上就是关于vs2008 在div中如何获得panel的坐标因为需要做一个点击按钮时,改变panel的位置。全部的内容,包括:vs2008 在div中如何获得panel的坐标因为需要做一个点击按钮时,改变panel的位置。、jquery怎么给一个DIV设置坐标、DIV+CSS怎么才能知道图片的坐标、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9790027.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存