JS 获取控件的绝对位置

js获取控件的绝对位置已经控件宽度和高度

2010-08-11 13:07

//获取控件左绝对位置

//获取控件宽度

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;
            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>