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

最新推荐文章于 2021-07-28 21:09:17 发布

转载最新推荐文章于 2021-07-28 21:09:17 发布 · 1.3w 阅读

文章标签：

#div #opera #safari #function #null #浏览器

js 专栏收录该内容

41 篇文章

订阅专栏

本文介绍三种使用JavaScript获取页面中DIV元素位置坐标的方法，包括利用getBoundingClientRect()，自定义递归函数，以及兼容多种浏览器的解决方案。

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') {   
        returnfalse;   
    }   
    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);