js获取DIV的位置坐标的三种方法！

js获取DIV的位置坐标的三种方法！

js获取DIV的位置坐标的三种方法！

      方法一：

var odiv=document.getElementById(\'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.getElementById(\'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.getElementById(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);

　　欢迎测试。