求教MainBox.style.left怎么就是取不到呢？

代码如下，我希望把MainBox.style.left得到，然后用来计算一下，请问为什么取不到？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title><style>
#ContextMenu{
position:absolute;
display:none;
width:100px; 
height:100px; 
background:blue;
}
#MainBox{
position:absolute;
left:40px;
top:40px;
width:300px; 
height:300px; 
background:red;
}
</style>
</head><body>
特别注意这两个div之间应该是父子嵌套的关系
<div id="MainBox" onclick="ShowMouse();">
<div id="ContextMenu"></div>
</div></body>
</html>
<script type="text/JavaScript">
<!--
function ShowMouse() { //v1.0
//alert("右"+ event.clientX + event.clientY ); 
var MyContextMenu=document.getElementById("ContextMenu");
var MainBox=document.getElementById("MainBox");
if(MyContextMenu.style.display=='block'){
MyContextMenu.style.display='none';
}
else{
MyContextMenu.style.display='block';
}
alert(MainBox.style.left+"1111");
var menuX=event.clientX-MainBox.style.left;
var menuY=event.clientY-MainBox.style.top; MyContextMenu.style.left= menuX +"px" ;
MyContextMenu.style.top= menuY+"px" ;
}//-->
</script>

解决方案 »

  1.   

    用offsetLeft 试试或者：
    parseInt(MainBox.style.left,10);
      

  2.   

    如果不是用内联样式定义的话，你用style.left是取不到值的。
    function getStyle(o, k) {
    var _k = k.replace(/-[a-z]/g, function(a) {return a.substr(1,1).toUpperCase()});
    var v = o.style[_k];
    if(!v) {
    if (document.defaultView && document.defaultView.getComputedStyle) {
    var c = document.defaultView.getComputedStyle(o, null);
       v = c ? c.getPropertyValue(_k) : null;
    } else if (o.currentStyle) {
    v = o.currentStyle[_k];
    }
    }
    return v;
    }
      

  3.   

    谢谢 我已经引用您的代码 并且在chrome上面通过了 请问js有没有一个统一的标准 手册之类的 谢谢！！！
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title><style>
    #ContextMenu{
    position:absolute;
    display:none;
    width:100px; 
    height:100px; 
    background:blue;
    }
    #MainBox{
    position:absolute;
    width:300px; 
    height:300px; 
    background:red;
    left:40px;
    top:40px;
    }
    </style>
    </head><body>
    特别注意这两个div之间应该是父子嵌套的关系
    <div id="MainBox" onclick="ShowMouse();">
    <div id="ContextMenu"></div>
    </div></body>
    </html>
    <script type="text/JavaScript">
    <!--
    function getStyle(o, k) {
        var _k = k.replace(/-[a-z]/g, function(a) {return a.substr(1,1).toUpperCase()});
        var v = o.style[_k];
        if(!v) {
            if (document.defaultView && document.defaultView.getComputedStyle) {
                var c = document.defaultView.getComputedStyle(o, null);
               v = c ? c.getPropertyValue(_k) : null;
            } else if (o.currentStyle) {
                v = o.currentStyle[_k];
            }        
        }
        return v;
    }
    function ShowMouse() { //v1.0
    //alert("右"+ event.clientX + event.clientY ); 
    var MyContextMenu=document.getElementById("ContextMenu");
    var MainBox=document.getElementById("MainBox");
    if(MyContextMenu.style.display=='block'){
    MyContextMenu.style.display='none';
    }
    else{
    MyContextMenu.style.display='block';
    }

    //alert(parseInt(MainBox.style.left,10)+"1111");
    var MainBoxLeft=getStyle(MainBox,'left');
    var MainBoxTop=getStyle(MainBox,'top');
    //alert("111111"+MainBoxLeft);
    var menuX=event.clientX-parseInt(MainBoxLeft,10);
    var menuY=event.clientY-parseInt(MainBoxTop,10); MyContextMenu.style.left= menuX +"px" ;
    MyContextMenu.style.top= menuY+"px" ;
    }//-->
    </script>