找某个控件的坐标动态显示div（支持ie和ff）

最新推荐文章于 2024-01-23 21:09:53 发布

apple_wxs

最新推荐文章于 2024-01-23 21:09:53 发布

阅读量148

点赞数

分类专栏： JavaScript 文章标签： IE

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

看下面的例子，里面提供了一个得到元素绝对位置（坐标）的方法getElementPos(obj)

<HTML>
 <BODY>
 <div id="mydiv" style="position:absolute; display:none; background:#FF9933; height:80;width:120;"> I am div ^_^</div>
 点击showDiv按钮在文本框下面出现一个DIV<br>
 <table border=1>
	<tr>
		<td>
			<table border=1>
				<tr>
					<td>aa</td>
					<td>
						<input type="text" id="test">
						<button onclick="showDiv()">showDiv</button>
					</td>
				</tr>
			</table>
		</td>
	</tr>
  </table>

  <SCRIPT LANGUAGE="JavaScript">
  <!--
//得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里
function getElementPos(obj)
{
	var left = 0;
	var top = 0;

	if(obj.x)
	{
		left= obj.x;
		top = obj.y;
	}else if(obj.offsetParent)
	{	
		while(obj.offsetParent)
		{		
			left += obj.offsetLeft;
			top  += obj.offsetTop;
			obj = obj.offsetParent;
		} 
	}

	return [left,top];//封装在一个数组里
}
function showDiv()
{
	var mydiv = document.getElementById("mydiv");
	var pos = getElementPos(document.getElementById("test"));
	mydiv.style.display = "";

	mydiv.style.left = pos[0];
	mydiv.style.top = pos[1] + document.getElementById("test").offsetHeight;
}
  //-->
  </SCRIPT>
 </BODY>
</HTML>