html获取div坐标,js获取DIV的位置坐标

方法一：

var odiv=document.getElementByIdx_x('divid');

alert(odiv.getBoundingClientRect().left);

alert(odiv.getBoundingClientRect().top);

方法二：

function CPos(x, y)

{

this.x = x;

this.y = y;

}

function GetObjPos(ATarget)

{

var target = ATarget;

var pos = new CPos(target.offsetLeft, target.offsetTop);

var target = target.offsetParent;

while (target)

{

pos.x += target.offsetLeft;

pos.y += target.offsetTop;

target = target.offsetParent

}

return pos;

}

var obj = document.getElementByIdx_x('divid')

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

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

方法三：

function getElementPos(elementId){

var ua = navigator.userAgent.toLowerCase();

var isOpera = (ua.indexOf('opera') != -1);

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

var el = document.getElementByIdx_x(elementId);

if (el.parentNode === null || el.style.display == 'none') {

return false;

}

var parent = null;

var pos = [];

var box;

if (el.getBoundingClientRect) //IE

{

box = el.getBoundingClientRect();

var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

return {

x: box.left + scrollLeft,

y: box.top + scrollTop

};

}

else

if (document.getBoxObjectFor) // gecko

{

box = document.getBoxObjectFor(el);

var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;

var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;

pos = [box.x - borderLeft, box.y - borderTop];

}

else // safari & opera

{

pos = [el.offsetLeft, el.offsetTop];

parent = el.offsetParent;

if (parent != el) {

while (parent) {

pos[0] += parent.offsetLeft;

pos[1] += parent.offsetTop;

parent = parent.offsetParent;

}

}

if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && el.style.position == 'absolute'))

{

pos[0] -= document.body.offsetLeft;

pos[1] -= document.body.offsetTop;

}

}

if (el.parentNode) {

parent = el.parentNode;

}

else {

parent = null;

}

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

ancestors

pos[0] -= parent.scrollLeft;

pos[1] -= parent.scrollTop;

if (parent.parentNode) {

parent = parent.parentNode;

}

else {

parent = null;

}

}

return {

x: pos[0],

y: pos[1]

};

}

var xd = getElementPos("divid");

alert(xd.x);

alert(xd.y);