JS 获取控件的绝对位置

最新推荐文章于 2023-04-26 11:49:22 发布

qihuitoday

最新推荐文章于 2023-04-26 11:49:22 发布

阅读量507

点赞数 1

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/qihuitoday/article/details/84160683

版权

//获取控件左绝对位置

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 οnmοuseοver="javascript:showTip('d','div1')">aaaaaaaaa</a><br />
<a οnmοuseοver="javascript:showTip('d','div2')">ssssssssssssss</a><br />
<a οnmοuseοver="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>
转自: http://www.cnblogs.com/huanghai223/archive/2010/12/14/1905884.html

qihuitoday

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 获取控件的绝对位置

//获取控件左绝对位置function getAbsoluteLeft(objectId) {o = document.getElementById(objectId)oLeft = o.offsetLeft while(o.offsetParent!=null) { oParent = o.offsetParent oLeft += oPa...
复制链接

扫一扫