如何用JS 获取DIV的坐标位置

如何用JS 获取DIV的坐标位置,第1张

js获取DIV的位置坐标的方法有三种,分别如下:

方法一:

var odiv=documentgetElementByIdx_x('divid');

alert(odivgetBoundingClientRect()left);

alert(odivgetBoundingClientRect()top);

方法二:

function CPos(x, y)

{

thisx = x;

thisy = y;

}

function GetObjPos(ATarget)

{

var target = ATarget;

var pos = new CPos(targetoffsetLeft, targetoffsetTop);

var target = targetoffsetParent;

while (target)

{

posx += targetoffsetLeft;

posy += targetoffsetTop;

target = targetoffsetParent

}

return pos;

}

var obj = documentgetElementByIdx_x('divid')

alert(GetObjPos(obj)['x']) //x坐标

alert(GetObjPos(obj)['y']) //y坐标

方法三:

function getElementPos(elementId){

var ua = navigatoruserAgenttoLowerCase();

var isOpera = (uaindexOf('opera') != -1);

var isIE = (uaindexOf('msie') != -1 && !isOpera); // not opera spoof

var el = documentgetElementByIdx_x(elementId);

if (elparentNode === null || elstyledisplay == 'none') {

return false;

}

var parent = null;

var pos = [];

var box;

if (elgetBoundingClientRect) //IE

{

box = elgetBoundingClientRect();

var scrollTop = Mathmax(documentdocumentElementscrollTop, documentbodyscrollTop);

var scrollLeft = Mathmax(documentdocumentElementscrollLeft, documentbodyscrollLeft);

return {

x: boxleft + scrollLeft,

y: boxtop + scrollTop

};

}

else

if (documentgetBoxObjectFor) // gecko

{

box = documentgetBoxObjectFor(el);

var borderLeft = (elstyleborderLeftWidth) parseInt(elstyleborderLeftWidth) : 0;

var borderTop = (elstyleborderTopWidth) parseInt(elstyleborderTopWidth) : 0;

pos = [boxx - borderLeft, boxy - borderTop];

}

else // safari & opera

{

pos = [eloffsetLeft, eloffsetTop];

parent = eloffsetParent;

if (parent != el) {

while (parent) {

pos[0] += parentoffsetLeft;

pos[1] += parentoffsetTop;

parent = parentoffsetParent;

}

}

if (uaindexOf('opera') != -1 || (uaindexOf('safari') != -1 && elstyleposition == 'absolute'))

{

pos[0] -= documentbodyoffsetLeft;

pos[1] -= documentbodyoffsetTop;

}

}

if (elparentNode) {

parent = elparentNode;

}

else {

parent = null;

}

while (parent && parenttagName != 'BODY' && parenttagName != 'HTML') { // account for any scrolled

ancestors

pos[0] -= parentscrollLeft;

pos[1] -= parentscrollTop;

if (parentparentNode) {

parent = parentparentNode;

}

else {

parent = null;

}

}

return {

x: pos[0],

y: pos[1]

};

}

var xd = getElementPos("divid");

alert(xdx);

alert(xdy);

documentgetElementById(1)styledisplay ="none";

这句话 获取不到数据

documentgetElementById(1) 为空,所以 调用他的 属性,就抛异常了,JS方法就终止了

你没有ID为1 的 对象

Android中可以通过三种方式获到屏幕大小:

1、通过WindowManager获取

DisplayMetrics dm = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(dm);

Systemoutprintln("heigth : " + dmheightPixels);

Systemoutprintln("width : " + dmwidthPixels);

2、通过Resources获取

DisplayMetrics dm2 = getResources()getDisplayMetrics();

Systemoutprintln("heigth2 : " + dm2heightPixels);

Systemoutprintln("width2 : " + dm2widthPixels);

3、通过Display 获取屏幕的默认分辨率

Display display = getWindowManager()getDefaultDisplay();

Systemoutprintln("width-display :" + displaygetWidth());

Systemoutprintln("heigth-display :" + displaygetHeight());

你是说用js把这句话添加到页面上?那就先获取某个对象,比如某个div,然后用innerhtml=<div style="display:none">21321</div>

1、首先打开我们测试的编辑工具 我这里使用的是Eclipse。

2、首先我们新建一个测试项目然后新建一个indexhtml、basicjs和basiccss文件

3、js修改html文件中div的style中值来修改div的高度 HTML文件中的文件代码。

4、接下来我们就使用js修改高度。

5、这时我们敲js中的代码 获取div1的id 使用css属性对应的style属性然后设置高度。

6、使用js修改CSS文件中的div的height的值 HTML文件中的代码。

7、样式表css文件中的代码如图所示  运行项目之后 你会看到两个div的高度是一样的。

8、然后我们是在js文件中获取div1的id属性 然后使用objstylecssTest来修改嵌入式的css。

9、然后运行项目之后 两次结果都是一样的 div的高度改变了  。

以上就是关于如何用JS 获取DIV的坐标位置全部的内容,包括:如何用JS 获取DIV的坐标位置、js 代码document.getElementById(1).style.display ="none"; 之后不能获取定义的数值、Android手机js获取屏幕尺寸不准,导致计算的问题等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存