Position abrufen und festlegen mit jQuery .offset ()

106

Wie kann ich die Position eines Elements mit der jQuery- .offsetMethode abrufen und festlegen ?

Nehmen wir an, ich habe einen Div layer1und einen anderen layer2. Wie kann ich die Position von erhalten layer1und dieselbe Position einstellen layer2?

Denise
quelle
6
Denise, hast du überhaupt die .offset () -Methode auf der jQuery-Website überprüft? Warum akzeptierst du nicht Steves Antwort unten?!
Rafid
1
@ Rafid sie kam im Grunde nie zurück
jcollum
6
Kann ich ihre Punkte haben?
Ganders

Antworten:

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

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});
Steve
quelle
7
Sie können einfach das gesamte offsetObjekt übergeben, so dass die //set:$("#secondElementId").offset(offset)
Mecampbellsoup
Hallo! Wie kann ich unten und rechts von div einstellen? Es gibt keine untere, rechte Eigenschaft im Offset
JerryGoyal
34

Ich empfehle eine andere Option. Die jQuery-Benutzeroberfläche verfügt über eine neue Positionsfunktion, mit der Sie Elemente relativ zueinander positionieren können. Eine vollständige Dokumentation und Demo finden Sie unter: http://jqueryui.com/demos/position/#option-offset .

Hier ist eine Möglichkeit, Ihre Elemente mithilfe der Positionsfunktion zu positionieren:

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);
KSev
quelle
13
Diese Antwort wurde zweimal ohne Erklärung abgelehnt. Bitte sagen Sie warum, wenn Sie meine Antwort ablehnen. Vielen Dank!
KSev
2
Vielleicht liegt das daran, dass Sie die jQuery-Benutzeroberfläche verwenden, während das OP nur jQuery fragt.
Kinderwagen
7
oft gehen die Leute mit der Abwahl zu weit. Nehmen wir nicht an, dass eine umfassendere Antwort für andere nutzlos ist, selbst wenn es sich um eine Erweiterung des OP handelt. Lass mich nicht mit dem "Geschlossenen, da dies keine richtige Frage ist" anfangen;)
landete am
@KSev - Ich komme aus der Zukunft. jQuery hat noch keinen Setter auf .position... Siehe: api.jquery.com/position
Koshinae
@Koshinae Es ist Teil von jQuery "UI". Siehe den obigen Link oder versuchen Sie es mit jqueryui.com/position . Wenn Sie jQuery verwenden, sollten Sie auch die Verwendung von angleJS 2.0 in Betracht ziehen. Ich gehe jedoch davon aus, dass Sie Legacy-Code beibehalten.
KSev
16

Es ist machbar, aber Sie müssen wissen, dass mit using offset()die Position des Elements relativ zum Dokument festgelegt wird:

$('.layer1').offset( $('.layer2').offset() );
Amjad Masad
quelle
0

Hier ist eine Option. Dies gilt nur für die x-Koordinaten.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});
hillspro
quelle
offset (). left und css.left sind nicht dasselbe, sie können abhängig von der Seitenstruktur dieselben Werte haben oder auch nicht.
Kalle
Ich + 1 würde. Es scheint gut für mich zu funktionieren und es ist im Wesentlichen dasselbe wie die unausgewählte Antwort unten, die 85+ Stimmen hat.
Paul Nelson Baker
Hat für mich gearbeitet. Danke für den Beitrag!
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
quelle