堆棧內存溢出
  簡體   English   中英

動態設置div的位置

[英]Set position of div dynamically

 原文  2015-09-11 05:59:37  6   4    javascript/ html/ css

問題描述

我必須創建一個搜索結果框。 每當用戶在搜索文本框中鍵入內容時，結果列表將填充在文本框下方的搜索結果框中。 我可以在只有一個搜索框實例的情況下執行此操作（調用方是單個文本框）。 當同一搜索框用於多個文本框時，會發生此問題。 我希望它根據呼叫者文本框調整其位置。 這是代碼： 

<!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>

我需要在代碼中進行哪些更改？ 您也可以查看jsfiddle

4 個解決方案

解決方案1
 5 已采納  2015-09-11 06:20:00

將此添加到您的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);

解決方案2
 1  2015-09-11 06:13:21

我想您有簡單的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';
}

並將此規則添加到您的CSS類.searchDiv ： 

position: relative;

這是一個小提琴

解決方案3
 0  2015-09-11 06:15:57

您可以使用jQuery修改.searchDiv的位置。 

$(".searchDiv").css({top: 55, left: 220, position:'absolute'});

試試這個： https : //jsfiddle.net/ybdesire/yy751fn6/

解決方案4
 0  2015-09-11 06:22:41

首先，您必須找出放置它的文本框的確切位置，然后將該Div絕對正確地放置在該位置的上下位置。

設置 position<div> 在運行時</div><div id="text_translate"><p>在鼠標懸停時，我想將“imgbox”移動到特定的絕對 position（這可能會將其移動到“i”圖像的頂部）。</p><p> 第二個圖像（“newimg”）加載，因此該部分工作（包括再次將其隱藏在“onmouseout”中）但它顯示在所有內容下方（如 HTML 代碼中）。 似乎設置imgbox.style.left和imgbox.style.top沒有做任何事情。 如果我改為設置“邊距”，則圖像將顯示在右側 200 像素處，並從原來的位置向下 200 像素（但仍低於其他所有內容）。</p><p> 我錯過了什么？ 如何在運行時使用常規 Javascript 移動“imgbox”（請不要 JQuery？）？ </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function onHoverIn(url) { var imgbox = document.getElementById("imgbox"); imgbox.style.visibility='visible'; var newimg = document.createElement("img"); newimg.src = url; var oldimg = document.getElementById("i"); /*if(oldimg.addEventListener){ //Removed so the snippet'll run oldimg.addEventListener('mouseout',onHoverOut,false); } else { oldimg.attachEvent('onmouseout',onHoverOut); }*/ imgbox.innerHTML=''; imgbox.appendChild(newimg); imgbox.style.left = '200px'; imgbox.style.top = '200px'; //imgbox.style.marginLeft = '200px'; //imgbox.style.marginTop = '200px'; }</pre><pre class="snippet-code-css lang-css prettyprint-override"> #imgbox { position: absolute; border: 1px solid #999; background: #FFFFFF; filter: Alpha(Opacity=100); visibility: hidden; z-index: 50; overflow: hidden; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"&gt; &lt;p&gt;Long Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;END TEEEEEEEEEEEXT&lt;/p&gt; &lt;div id="imgbox"&gt;&lt;/div&gt;</pre></div></div><p></p><p> 抱歉，圖片很大，所以不知道效果如何。 我用 Firefox 85.0、Chrome 88、IE 和 Edge 測試了代碼，只需雙擊 .html 文件，定位在其中任何一個都不能正常工作。</p></div>

[英]Set position of <div> at runtime

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 動態設置彈出div的位置 如何設置動態定位的div的正確position（） 根據窗口大小瀏覽器動態設置div位置 動態計算div位置 動態更改div的位置 使用jquery動態設置位置 設置可拖動div的位置 設置 position<div> 在運行時</div><div id="text_translate"><p>在鼠標懸停時，我想將“imgbox”移動到特定的絕對 position（這可能會將其移動到“i”圖像的頂部）。</p><p> 第二個圖像（“newimg”）加載，因此該部分工作（包括再次將其隱藏在“onmouseout”中）但它顯示在所有內容下方（如 HTML 代碼中）。 似乎設置imgbox.style.left和imgbox.style.top沒有做任何事情。 如果我改為設置“邊距”，則圖像將顯示在右側 200 像素處，並從原來的位置向下 200 像素（但仍低於其他所有內容）。</p><p> 我錯過了什么？ 如何在運行時使用常規 Javascript 移動“imgbox”（請不要 JQuery？）？ </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function onHoverIn(url) { var imgbox = document.getElementById("imgbox"); imgbox.style.visibility='visible'; var newimg = document.createElement("img"); newimg.src = url; var oldimg = document.getElementById("i"); /*if(oldimg.addEventListener){ //Removed so the snippet'll run oldimg.addEventListener('mouseout',onHoverOut,false); } else { oldimg.attachEvent('onmouseout',onHoverOut); }*/ imgbox.innerHTML=''; imgbox.appendChild(newimg); imgbox.style.left = '200px'; imgbox.style.top = '200px'; //imgbox.style.marginLeft = '200px'; //imgbox.style.marginTop = '200px'; }</pre><pre class="snippet-code-css lang-css prettyprint-override"> #imgbox { position: absolute; border: 1px solid #999; background: #FFFFFF; filter: Alpha(Opacity=100); visibility: hidden; z-index: 50; overflow: hidden; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"&gt; &lt;p&gt;Long Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;END TEEEEEEEEEEEXT&lt;/p&gt; &lt;div id="imgbox"&gt;&lt;/div&gt;</pre></div></div><p></p><p> 抱歉，圖片很大，所以不知道效果如何。 我用 Firefox 85.0、Chrome 88、IE 和 Edge 測試了代碼，只需雙擊 .html 文件，定位在其中任何一個都不能正常工作。</p></div> 動態取得最高div位置 動態設置div的高度
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM