使用jQuery .offset（）获取和设置位置

106

如何使用jQuery .offset方法获取和设置元素的位置？

假设我有一个div layer1和另一个layer2。如何获得layer1和设置相同的位置layer2？

jquery

— 丹妮丝
source

6

丹妮丝，您甚至在jQuery网站上检查.offset（）方法吗？另外，为什么您不接受下面的史蒂夫回答？！

— 拉菲德

1

@Rafid她基本上就再也没有回来

— jcollum

6

我能给她点吗？

— ganders 2014年

191

//Get
var p = $("#elementId");
var offset = p.offset();

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});

— 史蒂夫
source

7

您可以传递整个offset对象，这样//set就变成了： $("#secondElementId").offset(offset)

— mecampbellsoup 2014年

嘿！如何设置div的底部和右侧？没有底部，右侧属性可抵消

— JerryGoyal 2015年

34

我建议另一个选择。jQuery UI具有新的位置功能，可让您相对于彼此定位元素。有关完整的文档和演示，请参阅：http : //jqueryui.com/demos/position/#option-offset。

这是使用position功能定位元素的一种方法：

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);

— KSev
source

13

这个答案被否决了两次，没有任何解释。请务必说明原因，如果您不赞成我的回答。谢谢！

— KSev

2

可能是因为您使用jQuery UI，而OP仅询问jQuery。

— 婴儿车

7

人们通常会在不赞成投票的情况下走得太远。我们不要假设更广泛的答案对其他人没有用，即使这可能是OP的扩展。不要让我着手“封闭式的，因为这不是一个正确的问题”；）

— 登陆

@KSev-我来自未来。jQuery仍然没有设置器.position...请参阅：api.jquery.com/position

— Koshinae

@Koshinae它是jQuery“ UI”的一部分。请参阅上面的链接或尝试jqueryui.com/position。另外，如果您使用的是jQuery，则可能要考虑使用angularJS 2.0。但是，我希望您正在维护旧版代码。

— KSev 2013年

16

这是可行的，但您必须知道using可以offset()设置元素相对于文档的位置：

$('.layer1').offset( $('.layer2').offset() );

— 阿姆贾德·马萨德（Amjad Masad）
source

0

这是一个选项。这仅用于x坐标。

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});

— Hillspro
source

offset（）。left和css.left是不同的东西，根据页面结构的不同，它们的值可能相同也可能不同。

— Kalle 2013年

我+1了。这似乎对我来说很好，并且基本上与下面未选择的答案相同，票数超过85。

— Paul Nelson Baker

为我工作。感谢您的贡献！

— 艾伦·卡（Erlend KH）

0

var redBox = $(".post");

var greenBox = $(".post1");

var offset = redBox.offset();

$(".post1").css({'left': +offset.left});
$(".post1").html("Left :" +offset.left);

http://jsfiddle.net/va836/159/

— Chirag Suthar
source