如何將javascript放在另一個div頂部的javascript？

的第一個div是'#icon-selection-menu'吧，它的閒置位置絕對與top:0px和left:0px。所以它出現在內容div的左上角。如何將javascript放在另一個div頂部的javascript？

內容深的孩子我有其他的div，其實是'.emoticon-button'。他們的位置是相對於他們的父母。在這樣的按鈕上單擊我想將第一個div放在按鈕上方，將其底部邊框調整到按鈕的頂部邊框。

我怎樣才能得到頂部和離開值來設置$('#icon-selection-menu').top和$('#icon-selection-menu').left？

2013-02-27 zuba

爲該顯示添加相對css屬性：relative; – EnterJQ 2013-02-27 05:00:15

請給小提琴 – 2013-02-27 05:02:06

jQuery 提供.offset()以獲取任何元素相對於文檔的位置。由於#icon-selection-menu已經到文檔定位相對的，你可以使用這個：

var destination = $('.emoticon-button').offset(); 
$('#icon-selection-menu').css({top: destination.top, left: destination.left});

$('#icon-selection-menu')將被放置在$('.emoticon-button')的左上角。

_{（1）由於在問題中使用了$，因此假定jQuery。}

來源

2013-02-27 05:18:53 bfavaretto

第二行可能是'$（'＃icon-selection-menu'）.css（destination）;'不可以嗎？或'$（'＃icon-selection-menu'）。offset（destination）;' – 2016-03-25 00:20:13

@ BobStein-VisiBone是的！ – bfavaretto 2016-03-25 13:50:01

您可以通過使用下面的jQuery的獲得元素的位置

var position=$('#icon-selection-menu').position(); 
var left=position.left; 
var right=position.right

，並在該按鈕的點擊，你可以通過使用

$("#ID").live("click",function(){ 
    $('.emoticon-button').animate({left:left,right:right}); 
});

來源

2013-02-27 05:07:34

position（）返回父框內的頂部和左邊，對不起，這對我不起作用。感謝您的建議。 – zuba 2013-02-27 06:08:48

得到」 .emoticon按鈕上方的位置它'位置（左，頂部）。然後將其應用於'＃圖標選擇菜單'。在頂部和左側將會進行一些調整以與表情符合。

來源

2013-02-27 05:08:39 r1webs

position（）返回頂部並留在父框中，對不起，這對我不起作用。感謝您的建議。 – zuba 2013-02-27 06:13:28

你可以使用的offsetTop和offsetLeft一個div的頂部和左側位置

例子：`

$('#div-id').offset().top; 
$('#div-id').offset().left;

來源

2013-02-27 05:38:25

謝謝，Prasath！我投了票，但標記爲另一個職位的解決方案，因爲它更詳細。 – zuba 2013-02-27 06:12:20

JavaScript有一個內置的@bfavaretto提到的是哪個版本。它比Jquery版本稍長一些，但像我這樣的不使用Jquery的人可能需要它。

var iconselect = document.getElementById("icon-selection-menu"); 
var emoticonbtn = document.getElementById("emoticon-button"); 
var oTop = emoticonbtn.offsetTop; 
var oLeft = emoticonbtn.offsetLeft; 
iconselect.style.top = oTop; 
iconselect.style.left = oLeft; 
iconselect.style.position = "absolute";

你可以，當然，這個系統加上單位，如PX或其他東西。請注意，我上面所做的僅僅是一個示例，並且是針對兩個具有ID的分隔元素而不是類。代碼的前兩行將根據您的代碼而有所不同。元素iconselect是我正在嘗試對齊的元素，而元素emoticonbtn是您按下的按鈕，使iconselect顯示。代碼中最重要的部分總結如下：

elementtomove.offsetTop; //distance from top of screen 
elementtomove.offsetLeft; //distance from left of screen

希望這可以幫助那些不願意使用JQUERY的人！

來源

2017-01-19 22:45:09 IamGuest

[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop ） – IamGuest 2017-01-19 22:48:37

[offsetLeft]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft） – IamGuest 2017-01-19 22:49:21

conselect.style.top = oTop +「px」; iconselect.style.left = oLeft +「px」; 否則它不起作用，只適用於絕對屬性。 – 2017-10-06 07:40:22

如何將javascript放在另一個div頂部的javascript？

回答

相關問題