//获取控件左绝对位置
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;
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>