请教如何用JS计算2个ID之间的像素位置？

有2个div 一个id为  a
一个id为  b
B是浮动的~请问如何用 JS计算  b和a之间的距离呢？！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

div是个方框，每个div边角有4个坐标。
你所谓的距离的概念是？
首先感谢2位朋友的回复这样吧
id 为a的 div
是这样的a1     a2a3     a4
id 为b的 div
b1     b2b3     b4这样的2个方形。我想知道随着b这个浮动div的变化
b1 和 a3的距离是怎样的？或者 b2和 a4的距离……
分别计算，再减吧。
一层一层offsetTop算吧
直接可以通过 document.getElementById("divid").style.left 或 top 来获取它的位置的.
OK,做一个例子,供测试:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试</title>
<script language="JavaScript">
//Interface
function MyAPI()
{
    this.Type = {//  web browser ---------- learn from prototype framework
        IE:     !!(window.attachEvent && !window.opera),
        Opera:  !!window.opera,
        WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
        Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
        MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
    }
    this.api = this.getInstance();

    return this;
}

//IE implementation
function IEAPI()
{
    return this;
}

//W3C implementataion
function W3CAPI()
{
    return this;
}



//factory method
MyAPI.prototype.getInstance=function()
{
    if(this.Type.IE)
        return new IEAPI();
    else
        return new W3CAPI();

};


//method moveTo detail implementation
MyAPI.prototype.moveTo=function(obj,iX,iY)
{
    this.api.moveTo(obj,iX,iY);
}
IEAPI.prototype.moveTo=function(obj,iX,iY)
{
    if(iX!=null) obj.style.pixelLeft=iX;
    if(iY!=null) obj.style.pixelTop=iY;
}
W3CAPI.prototype.moveTo=function(obj,iX,iY)
{
    if(iX!=null) obj.style.left=iX+"px";
    if(iY!=null) obj.style.top=iY+"px";
}


//method getLeft detail implementation
MyAPI.prototype.getLeft=function(obj)
{
    return this.api.getLeft(obj);
}
IEAPI.prototype.getLeft=function(obj)
{
    return obj.style.pixelLeft;
}
W3CAPI.prototype.getLeft=function(obj)
{
    return parseInt(obj.style.left);
}
  //method getTop detail implementation
MyAPI.prototype.getTop=function(obj)
{
    return this.api.getTop(obj);
}
IEAPI.prototype.getTop=function(obj)
{
    return obj.style.pixelTop;
}
W3CAPI.prototype.getTop=function(obj)
{
    return parseInt(obj.style.top);
}
</script>
<script language="javascript">
    var myAPI = new MyAPI();
    var moveable = false;
    var xOff = 0;
   var yOff = 0;
    function start(obj,e){
        moveable = true;
        xOff = myAPI.getLeft(obj) - e.clientX;
        yOff = myAPI.getTop(obj) - e.clientY;
    }

    function move(obj,e){
        if(moveable){
            myAPI.moveTo(obj, xOff + e.clientX, yOff + e.clientY)
        }
    }

    function end(){
        moveable = false;
    }

function getdistance(){var x1=document.getElementById("layer1").style.pixelLeft;
var x2=document.getElementById("layer2").style.pixelLeft;
var y1=document.getElementById("layer1").style.pixelTop;
var y2=document.getElementById("layer2").style.pixelTop;alert(Math.sqrt((x2-x1)*(x2-x1)+(y2+y1)*(y2-y1)));//document.getElementById("layer1").innerHTML=Math.sqrt((x2-x1)*(x2-x1)+(y2+y1)*(y2-y1));
//=document.getElementById ("leyer1").opsition.left-document.getElementById ("layer2").position.left;
}</script>
</head><body>
<span id="myspan" onclick ="getdistance();">点击此处,用来测定距离</span><div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 494px; top: 103px" id="layer1" onmousedown="start(this,event)" onmousemove="move(this,event)" onmouseup="end()">浮动层.按下鼠标后移动,再测距</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 257px; top: 62px" id="layer2">另一个层</div>
　</body></html>
非常感谢可是这段代码的测试结果是 NaN……
这是什么问题呢！？求教
关键是这一段:
function getdistance(){var x1=document.getElementById("layer1").style.pixelLeft;
var x2=document.getElementById("layer2").style.pixelLeft;
var y1=document.getElementById("layer1").style.pixelTop;
var y2=document.getElementById("layer2").style.pixelTop;alert(Math.sqrt((x2-x1)*(x2-x1)+(y2+y1)*(y2-y1)));
}
你把你网页上两个层的ID替换上去试试.
我移到什么地方都是 NaN……
呵...
这个式子错了:
alert(Math.sqrt((x2-x1)*(x2-x1)+(y2+y1)*(y2-y1)));y2-y1