javascript 动态设置div的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32516488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set position of div dynamically
提问by user1640256
I have to create a search result box. Whenever a user type something in the search text box the list of result will be populated in the search result box just underneath the textbox. I am able to do this where there is only one instance of the search box(the caller is a single textbox). The problem occurs when the same searchbox is used for multiple text boxes. I want it to adjust its position according to the caller textbox. Here is the code:
我必须创建一个搜索结果框。每当用户在搜索文本框中键入内容时，结果列表将填充在文本框下方的搜索结果框中。我可以在只有一个搜索框实例的情况下执行此操作（调用方是单个文本框）。当同一个搜索框用于多个文本框时会出现此问题。我希望它根据调用者文本框调整其位置。这是代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.searchDiv {
border: 1px solid red;
width:150px;
height:100px;
visibility: hidden;
}
</style>
<script>
showSearchBox = function (_element) {
var _div = document.getElementById('divSearch');
_div.style.visibility = 'visible';
}
hideSearchBox = function () {
var _div = document.getElementById('divSearch');
_div.style.visibility = 'hidden';
}
</script>
</head>
<body>
<table border="0" style="width: 50%">
<tbody>
<tr>
<td style="width: 50%">
<input type="text" id="txtFirstName" name="txtFirstName" onfocus="showSearchBox(this)" onblur="hideSearchBox()" />
</td>
<td style="width: 50%">
<input type="text" id="txtLastName" name="txtLastName" onfocus="showSearchBox(this)" onblur="hideSearchBox()"/>
</td>
</tr><tr>
<td colspan="2" style="width: 100%">
This is just a placeholder text.
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%">
<div id="divSearch" class="searchDiv"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
What changes do I need to make in my code? You can also check out the jsfiddle
我需要对代码进行哪些更改？您还可以查看jsfiddle
回答by harshitpthk
add this to your show div method. fiddle. to make it more general you can use the top and left values from parent. Also add position:relativeto your div
将此添加到您的 show div 方法中。小提琴。为了使其更通用，您可以使用父级的顶部和左侧值。还添加position:relative到您的 div
var parentPositionLeft = _element.getBoundingClientRect().left;
var parentPositionTop = _element.getBoundingClientRect().top;
_div.style.left = parentPositionLeft+'px';
_div.style.top = parentPositionTop+'px';
console.log(_div.style.left);
回答by Kristijan Iliev
I guess you have plain javascript, so in this case you gonna need to change your function showSearchBoxfunction like this:
我猜你有普通的 javascript，所以在这种情况下你需要showSearchBox像这样改变你的函数：
showSearchBox = function (_element) {
var _div = document.getElementById('divSearch');
var input = _element.getBoundingClientRect();
_div.style.left = input.left + 'px';
_div.style.top = input.top + 'px';
_div.style.visibility = 'visible';
}
and add this rule to you css class .searchDiv:
并将此规则添加到您的 css 类.searchDiv：
position: relative;
Here is a fiddle
这是一个小提琴
回答by ybdesire
You can use jQuery to modify the position of .searchDiv.
您可以使用 jQuery 修改 .searchDiv 的位置。
$(".searchDiv").css({top: 55, left: 220, position:'absolute'});
Try this: https://jsfiddle.net/ybdesire/yy751fn6/
回答by Rehan Parvez
First you have to find out the exact position of the textbox where it is placed then placed this Div with postion absolute occordingly to that position below or above
首先，您必须找出放置它的文本框的确切位置，然后将此 Div 与绝对位置相对应地放置在低于或高于该位置的位置
