我如何获得x和y位置直属输入矩形的左下方?

我想实现一个自定义的自动完成功能所以基本上我现在的想法是,我将作出ABS定位的div这里给它的位置:

(图像) 我如何获得x和y位置直属输入矩形的左下方?

所以我的问题是一个变量引用文本框,我怎么直属输入矩形的左下侧获得x和y位置?

我的脚本必须工作在IE / FF / Safari浏览器/歌剧/铬的最新版本

我知道我可以使用库这样做,但没有我想学习他们是如何做到这一点(或者更好的方法)?

--------------解决方案-------------

这个问题是很多比它更复杂,似乎并涉及越来越元素相对于文档中的位置。 这样做的代码可以从jQuery源拉(http://code.jquery.com/jquery-1.6.1.js - 搜索“jQuery.fn.offset”)

jQuery中:

var node = $('#textbox'),
pos = box.offset(); // the complicated piece I'm using jQuery for

node.top += node.height(); // node.offsetHeight without jQuery
node.left += node.width(); // node.offsetWidth without jQuery

答案可以,如果你不关心FF2或Safari3被极度简化:

var box = document.getElementById('yourTextBox').getBoundingClientRect(),
left = box.left,
bottom = box.bottom;

很好的意见! 对于我的情况下,总有一个偏移量的父(这就是为什么我使用的位置 - http://api.jquery.com/position/)。 在希望它可以帮助别人想速战速决,下面的代码:

// I have a parent item (item) and a div (detail)
// that pops up at the bottom left corner of the parent:
var jItem = $(item);
var pos = jItem.position();
var marginTop = parseInt(jItem.css('margin-top'));
if (isNaN(marginTop)) {
marginTop = 0;
}
$(detail).css("top", pos.top + jItem.outerHeight() + marginTop)
.css("left", pos.left);
$(detail).show();

  • X = X偏移
  • Y = Y偏移 - (文本框高度+填充顶+填充底)

只要给盒子定义的宽度和高度。 然后,获得其顶部和左属性,并与宽度和高度加入。 简单。 我要去给你Pseodocode。

<STYLE>
object{width: 100px; height: 20px;}
</STYLE>

<SCRIPT>
x = object.left;
y = object.top;
x = x + object.width;
y = y + object.height;
</SCRIPT>

分类:JavaScript的 时间:2015-03-15 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.350 (s). 10 q(s)