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

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);

首先你要先搞清你所说的坐标变化不大是相对窗口，屏幕，还是文档的，他们的坐标系是不同的。不知你想要找的是哪一个。

1相对窗口，当然是以浏览器窗口为主了，即浏览器中可见部分（即包含文档部分）的左上角为坐标原点。这是用clientX和clientY获取的。

2相对屏幕，当然是以你的显示器为主了，显示器的左上角为原点，用screenX和screenY可以获取到

3相对文档的，即以文档BODY所显示的左上角为原点，例如当一个DIV的position="absolute"时设left="100px" top="100px"那么无论你如何变换浏览器，虽然它显示的位置在变但他在文档中的位置是不变的。一般用documentbodyscrollLeft+eventclientX和documentbodyscrollTop+eventclientY来获取

而offsetX解释说是事件产生的位置和鼠标位置的偏移量，没太理解，我也是初学。

而你说改变分辨率坐标改变，这是必然的。因为在不同的分辨率下网页的显示样式不同，这不是坐标改变的主要原因，主要还是因为度量的改变，如：无论屏幕的分辨率怎么改屏幕大小是不变的，但它代表的显示逻辑长度改变了，如1024×768和800×600，同样宽度的屏幕被当成1024个长度单位来用和当成800个长度单位来用当然会不同，当你点击屏幕的中央时前者返回的是1024/2而后者返回的是800/2所以坐标值会改变。就像你用米尺量是1米，用寸尺量是3寸，一个是1，一个是3一样的道理。

1、setTimeout("moveImg('"+elementId+"')",10)这句错误了。你在上面传过来的elementId是一个对象，不是文本。所以不能这样写。setTimeout有参数的话，对象参数是传不过去的，所以，直接把函数的参数改成文本吧。

2、if(xpos==400&&ypos==200)这个判断有逻辑错误的。因为你设置的初始位置是随机的，每隔10ms加上5，他的结果不一定等于400或200，有可能是401或203，那就永远停不下来了。

3、对象直接可以设置id值，如objid='abc'，没必要setAttribute啦。

4、往数组里添加元素，直接有个push方法。

结合起来，你以上代码其实稍微改动一下就可以用了：

<script type="text/javascript">

windowonload=randomImg;

function randomImg(){

var myar=[];

var myar2=[];

var myar3=[];

for(var i=0;i<6;i++){

var x=parseInt(Mathrandom()1000);

var y=parseInt(Mathrandom()1000);

var imgs = documentcreateElement("img");

var name = "imgs"+i;

imgsid=name;

imgssetAttribute("src","images/imageshow2/tegif");

imgsstyleposition="absolute";

imgsstyleleft=x+"px";

imgsstyletop=y+"px"

documentbodyappendChild(imgs);

myarpush(imgsstyleleft);//个人比较喜欢直接push

myar2push(imgsstyletop);//不太喜欢arr[i]=xxx的写法

myar3push(imgsid);

}

for(var j=0;j<6;j++){

moveImg(myar3[j]);//直接把上面的myar3用起来撒,对象的id，传过去。

}

}

function moveImg(elementId){//传过来对象的ID，是一个文本

var elm=documentgetElementById(elementId);//这里获取对象

var xpos = parseInt(elmstyleleft);//这里现在不会报错了

var ypos = parseInt(elmstyletop);

xpos+=5;

ypos+=5;

elmstyleleft=xpos+"px";

elmstyletop=ypos+"px";

if(xpos>=400&&ypos>=200)return false;

setTimeout("moveImg('"+elmid+"')",10);//对象的id，丢进去

}

</script>

根据设置希望的热区坐标。代码如下：

js代码 ：更多问题到问题求助专区>

css动画会触发三个事件：

1、animationstart，动画开始；

2、animationiteration，除首次，其他每次开始动画迭代都触发animationiteration事件；

3、animationend，动画结束事件；

监听animationend，然后去获取img的style

获取页面中元素到文档区域document的横向 纵向坐标的两种方法及其比较

在js控制元素运动的过程中 对于页面元素坐标位置的获取是经常用到的 这里主要总结下两种方法

一 通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现

在阅读javascript高级程序设计第三版DOM部分时 了解到要获取某个元素在页面上的偏移量 需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加 一直循环直至根元素 所以 要得到元素到文档区域的坐标位置 只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止

js代码

代码如下:

// 获取元素到文档区域的坐标

function getPosition(element) {

var actualLeft = element offsetLeft

actualTop = element offsetTop

current = element offsetParent; // 取得元素的offsetParent

// 一直循环直到根元素

while (current !== null) {

actualLeft += current offsetLeft;

actualTop += current offsetTop;

current = current offsetParent;

}

// 返回包含left top坐标的对象

return {

left: actualLeft

top: actualTop

};

}

例子截图

firebug下测试结果截图 (注 其他浏览器已通过测试!)

二 通过 getBoundingClientRect() 方法实现

getBoundingClientRect方法用于获得页面中某个元素的左 上 右和下分别相对浏览器视窗window的位置 返回的是一个对象 该对象有四个属性 top left right bottom;该方法原本是IE Only的 但是FF +和Opera +已经支持了该方法 可以说在获得页面元素位置上效率有很大的提高 另外 该方法避免使用while循环 而是直接获取数值来实现 比第一种方法性能要好 特别是在复杂的页面上更为明显

js代码

代码如下:

// 获取元素到文档区域的坐标

function getPosition(element){

var dc = document

rec = element getBoundingClientRect()

_x = rec left // 获取元素相对浏览器视窗window的左 上坐标

_y = rec top;

// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置

_x += dc documentElement scrollLeft || dc body scrollLeft;

_y += dc documentElement scrollTop || dc body scrollTop;

return {

left: _x

top: _y

};

}

经测试 该方法与第一种方法获取元素相对于document的坐标大小相同 对于IE低版本浏览器 存在一些差异

注意 记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!

lishixinzhi/Article/program/Java/JSP/201311/20207

1、新建一个html文件。

2、在html页面上创建一个点击的button按钮。

3、为button添加点击时创建一个新的div事件。使用documentcreateElement("div")创建一个新的div，然后使用innerHTML对新建的div设置内容，最后把div放到<body>显示。

4、为button按钮添加点击是创建新div事件。

5、保存好html文件后使用浏览器打开，点击button按钮会执行已经写好的创建div的事件。

以上就是关于如何用JS 获取DIV的坐标位置全部的内容，包括:如何用JS 获取DIV的坐标位置、js 获取鼠标坐标的问题、javascript 移动到指定坐标.等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！