14

第一个 div 是'#icon-selection-menu'bar，它的空闲位置是绝对的，带有top:0pxand left:0px。所以它出现在内容 div 的左上角。

在内容 div 孩子的深处，我得到了其他 div，它们实际上是一种“.emoticon-button”。他们的位置在他们的父母内部是相对的。在这样的按钮单击上，我想将第一个 div 定位在按钮上方，将其底部边框调整为按钮的顶部边框。

如何获取顶部和左侧值来设置$('#icon-selection-menu').top和$('#icon-selection-menu').left？

4

5 回答 5

26

jQuery 1提供.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-27T05:18:53.197 回答
6

您可以使用 offsetTop 和 offsetLeft 获取 div 的顶部和左侧位置

示例：`

$('#div-id').offset().top;
$('#div-id').offset().left;
于 2013-02-27T05:38:25.440 回答
4

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-19T22:45:09.460 回答
0

您可以使用以下 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-27T05:07:34.107 回答
0

获取 '.emoticon-button' 位置（左，上）。然后将其应用于“#icon-selection-menu”。顶部和左侧会有一些调整以与表情符号对齐。

于 2013-02-27T05:08:39.377 回答