JS 获取控件的绝对位置

js获取控件的绝对位置 已经控件宽度和高度
2010-08-11 13:07

//获取控件左绝对位置

function getAbsoluteLeft(objectId) {
o = document.getElementById(objectId)
oLeft = o.offsetLeft            
while(o.offsetParent!=null) {
oParent = o.offsetParent    
oLeft += oParent.offsetLeft
o = oParent
}
return oLeft
}
//获取控件上绝对位置
function getAbsoluteTop(objectId) {
o = document.getElementById(objectId);
oTop = o.offsetTop;
while(o.offsetParent!=null)
{  
oParent = o.offsetParent 
oTop += oParent.offsetTop  // Add parent top position
o = oParent
}
return oTop
}

//获取控件宽度

function getElementWidth(objectId) {
x = document.getElementById(objectId);
return x.offsetWidth;
}

 

范例演示:

 

<!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>
    <title>无标题页</title>
    <script type="text/javascript">
         function showTip(objShowID,objValueID)
        {
            var objToolTip= document.getElementById('toolTip');
            var objToolTipText=document.getElementById(objValueID);
            objToolTip.innerText=objToolTipText.innerText;
            objToolTip.style.display='block';
           
           
            objToolTip.style.pixelLeft=getAbsoluteLeft(objShowID);
            objToolTip.style.pixelTop=getAbsoluteTop(objShowID)+d.offsetHeight;
        }
       
       //获取控件左绝对位置

        function getAbsoluteLeft(objectId) {
            o = document.getElementById(objectId)
            oLeft = o.offsetLeft           
            while(o.offsetParent!=null) {
            oParent = o.offsetParent   
            oLeft += oParent.offsetLeft
            o = oParent
            }
            return oLeft
        }
        //获取控件上绝对位置
        function getAbsoluteTop(objectId) {
            o = document.getElementById(objectId);
            oTop = o.offsetTop;
            while(o.offsetParent!=null)
            { 
            oParent = o.offsetParent
            oTop += oParent.offsetTop  // Add parent top position
            o = oParent
            }
            return oTop
        }

    
        function Hidden()
        {
            var objToolTip= document.getElementById("toolTip");
            objToolTip.style.display='none';
        }
       
      
    </script>
    <style>
        .promptDiv
        {
            border: solid 1px #D1CDC5;
            width: 300px;
            height: 70px;
            position: absolute;
            display: none;
            background-color: #F6F5F3;
            padding: 5px;
            overflow-y: auto;
        }
    </style>
</head>
<body id="bd">
    <a onmouseover="javascript:showTip('d','div1')">aaaaaaaaa</a><br />
    <a onmouseover="javascript:showTip('d','div2')">ssssssssssssss</a><br />
    <a onmouseover="javascript:showTip('d','div3')">dddddddddddd</a>
   
    <div id="div1" style="display:none;">adfasdfasdfasdfasdf</div>
    <div id="div1"  style="display:none;">adfasdfasdfasdfasdf</div>
    <div id="div2"  style="display:none;">ddddddddddddddddd</div>
    <div id="div3"  style="display:none;">adfasdfddddddddddddasdfasdfasdf</div>
    <div id="div3"  style="display:none;">xcvzxcvzcxvzxcv</div>
    <div id="toolTip" class="promptDiv"></div>
   
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="d">ddddddds</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(js)