如何求得元素位置

wangxianshou 2010-04-15 10:26:09



<input type="text" name="date"   readOnly onClick="setDay(this);">

单击这个输入框，会弹出一个日历控件，我想固定这个日历控件相对于这个textbox的的位置，比如说右下方（5px，5px）该如何做呢请高手赐教~~

...全文

90 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

wangxianshou 2010-04-15

打赏
举报

谢谢大家了 ~~

wgale025 2010-04-15

打赏
举报

我也经常用，所以收集这个函数。

wgale025 2010-04-15

打赏
举报

楼主看看些函数是否可以帮你：
<input type="text" id="btn"/>

function findPos(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
return { x: curleft, y: curtop };
}
var obj = findPot(document.getElementById("btn"));
alert("x="+obj.x +"\ny="+obj.y);

这个方法在多个浏览器中通用。

shan1119 2010-04-15

打赏
举报

<td><input type="text" name="date" readOnly="readOnly" onClick="setDay(this);">日历控件<td>
日历控件.style.position="relative";
日历控件.style.left=txt.offsetWidth + 5;
日历控件.style.top=5;

shan1119 2010-04-15

打赏
举报

<input type="text" name="date" readOnly="readOnly" onClick="setDay(this);">

<div id=div1 style="position:relative; border:1px solid black; left:0px; top:0px; width:100px; height:100px;display:none;"></div>

  <script type="text/javascript">

    function setDay(txt){

        var div = document.getElementById("div1");

        div.style.display="block";

        div.style.left=txt.offsetWidth + 5;

        div.style.top=5;

    }

  </script>

浴火_凤凰 2010-04-15

打赏
举报

学习啊。。。。。。。

sundotLei 2010-04-15

打赏
举报

yujiayou 2010-04-15

打赏
举报

margin-top:5px;margin-left:5px;其它相同

囧 2010-04-15

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <script type="text/javascript">

	function getOffset (obj){

		var x = 0, y = 0;

		do{

			x += obj.offsetLeft;

			y += obj.offsetTop;

			

		}while(obj = obj.offsetParent);

		return {x:x, y:y};

	};

	function setDay(txt){

		var offset = getOffset(txt);

		var x = offset.x + txt.offsetWidth + 5, y = offset.y + txt.offsetHeight + 5;

		var div = document.createElement("div");

		div.style.cssText = "position:absolute; border:1px solid #006699; left:" + x + "px; top:" + y + "px; width:100px; height:50px;";

		document.body.appendChild(div);

	}

  </script>

 </HEAD>



 <BODY>

  <div>

	<table>

		<tr><td>f<br/>

			<input type="text" name="date" readOnly="readOnly" onClick="setDay(this);">

		</td></tr>

	</table>

  </div>

 </BODY>

</HTML>

wangxianshou 2010-04-15

打赏
举报

自己顶人呢~~

cocoanet 2010-04-15

打赏
举报

上面说的方法获得input的绝对位置，再来绝对定位日历控件，这样做有一个隐患：

当页面有滚动条，滚动滚轮移动页面时，日历控件不会移动，input和日立控件就“分离”了，

上面shan1119兄弟的方法采用相对定位，虽然可以解决这个问题，但是日立控件占据input下面的位置，并没有实现日立控件“浮动”于input下方的功能，
可以看看：

<input type="text" name="date" readOnly="readOnly" onClick="setDay(this);">

<div id=div1 style="position:relative; border:1px solid black; left:0px; top:0px; width:100px; height:100px;display:none;"></div>

  <script type="text/javascript">

    function setDay(txt){

        var div = document.getElementById("div1");

        div.style.display="block";

        div.style.left=txt.offsetWidth + 5;

        div.style.top=5;

    }

  </script>

  <div style="border:1px solid blank;">这是下面其他本内容，日历控件应该显示在这些文字之上才对</div>

那就改改吧，让日立控件相对于 input外面的容器绝对定位：

	<div style="position:relative;left:300px;border:1px solid green;">

		<input type="text" name="date" readOnly="readOnly" style="height:20px" onClick="setDay(this);">

		<div id="myDiv" style="position:absolute;left:5;top:25; width:100px;height:100px;border:1px solid red;display:none;"></div>

		<div style="border:1px solid blank;">这是下面其他本内容，日历控件应该显示在这些文字之上才对</div>

	</div>

  <script type="text/javascript">

    function setDay(txt){

        var div = document.getElementById("myDiv");

        div.style.display="block";

    }

  </script>