Pobierz i ustaw pozycję za pomocą jQuery .offset ()


106

Jak pobrać i ustawić pozycję elementu .offsetmetodą jQuery ?

Powiedzmy, że mam element DIV layer1i inny layer2. Jak mogę uzyskać pozycję layer1i ustawić tę samą pozycję layer2?


6
Denise, czy w ogóle sprawdzałaś metodę .offset () na stronie jQuery? Dlaczego nie przyjmiesz odpowiedzi Steve'a poniżej ?!
Rafid

1
@Rafid właściwie nigdy nie wróciła
jcollum

6
Czy mogę dostać jej punkty?
ganders

Odpowiedzi:


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

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

7
Możesz po prostu przejść cały offsetobiekt, aby //setwyglądał następująco: $("#secondElementId").offset(offset)
mecampbellsoup

Hej! jak ustawić na dole i po prawej stronie div? nie ma dołu, prawej własności w przesunięciu
JerryGoyal

34

Polecam inną opcję. Interfejs użytkownika jQuery ma nową funkcję pozycjonowania, która umożliwia pozycjonowanie elementów względem siebie. Pełną dokumentację i wersję demonstracyjną można znaleźć pod adresem: http://jqueryui.com/demos/position/#option-offset .

Oto jeden sposób na pozycjonowanie elementów za pomocą funkcji pozycji:

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

13
Ta odpowiedź została dwukrotnie odrzucona, bez wyjaśnienia. Proszę powiedz dlaczego, jeśli nie zagłosujesz na moją odpowiedź. Dzięki!
KSev

2
Może to dlatego, że używasz interfejsu użytkownika jQuery, podczas gdy OP pyta tylko o jQuery.
wózek dziecięcy

7
często ludzie posuwają się zbyt daleko w głosowaniu w dół. Nie zakładajmy, że szersza odpowiedź jest bezużyteczna dla innych, nawet jeśli może to być rozszerzenie PO. Nie zaczynajcie od „zamkniętego, bo to nie jest właściwe pytanie”;)
wylądował

@KSev - Jestem z przyszłości. jQuery nadal nie ma włączonego setera .position... Zobacz: api.jquery.com/position
Koshinae

@Koshinae To część jQuery "UI". Zobacz powyższy link lub wypróbuj jqueryui.com/position . Ponadto, jeśli używasz jQuery, możesz rozważyć użycie angularJS 2.0. Jednak spodziewam się, że zachowujesz starszy kod.
KSev

16

Jest to wykonalne, ale musisz wiedzieć, że użycie offset()ustawia pozycję elementu względem dokumentu:

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

0

Oto opcja. To dotyczy tylko współrzędnych x.

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

offset (). left i css.left to nie to samo, mogą, ale nie muszą, mieć te same wartości w zależności od struktury strony.
Kalle

Dałem +1. Wydaje się, że działa dobrze dla mnie i zasadniczo jest to to samo, co niewybrana odpowiedź poniżej, która ma ponad 85 głosów.
Paul Nelson Baker

Pracował dla mnie. Dzięki za wkład!
Erlend KH

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.