显示DOM相对位置代码

    还为操作DOM元素的位置烦恼吗?参考以下代码,会有收获滴。

  <script language="javascript" type="text/javascript">
    function hideLocSelect(itemName)
{ 
 $(itemName).style.display="none";
}

    function $(id)
{
 return document.getElementById(id);
}
    
function showLocSelect(sender,offsetX,offsetY)
{
  var locListDivTips=$('locListDiv');
    locListDivTips.style.top=(getposOffset(sender,"top")-offsetX)+"px";
 locListDivTips.style.left=(getposOffset(sender,"left")-offsetY)+"px";
 locListDivTips.style.position="absolute";

 
 locListDivTips.style.display="block"; 

}

//得到DOM具体位置
function getposOffset(what, offsettype)
{ 
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; 
    var parentEl=what.offsetParent; 
    while (parentEl!=null)
    { 
        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; 
         parentEl=parentEl.offsetParent; 
    } 
    return totaloffset; 
} 

  </script>

具体使用：

  <div id="locListDiv"  style="display:none;"  style="background-color:#000; color:#fff;">显示出东西出来</div>
   
   
    <ul>
    <li>国民党推两岸开放时间表 直航包机7月启动</li>
<li>黑砖窑事件官员复职反响强烈 上级责令废止 </li>
<li>腾讯智慧(Tencent MIND)高在线营销峰会 </li>
<li>圣火今晚赴伊斯兰堡 全球华人签名捍卫圣火 </li>
<li>昆明市委书记促官员解放思想:没禁止就能干</li>
<li><a href="#"  onmouseover="javascript:showLocSelect(this,20,20);"  onmouseout="javascript:hideLocSelect('locListDiv')">圣火今晚赴伊斯兰堡 全球华人签名捍卫圣火  </a> </li>

</ul>