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