Wie bekomme ich den richtigen Versatz eines Elements? - jQuery

83

Dies ist wahrscheinlich eine wirklich einfache Frage, aber wie kann ich den richtigen Offset eines Elements in jQuery ermitteln?

Ich kann:

$("#whatever").offset().left;

und es ist gültig.

Aber es scheint, dass:

$("#whatever").offset().right 

ist nicht definiert.

Wie erreicht man dies in jQuery?

Vielen Dank!!

Alex
quelle

Antworten:

157

Alex, Gary:

Wie angefordert, ist hier mein Kommentar als Antwort gepostet:

var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Danke für die Information.

Im Pseudocode kann dies ausgedrückt werden als:

Der richtige Versatz ist:

Die Fenster Breite MINUS
(das Element versetzt links plus Die Element - Außenbreite )

Brendon Crawford
quelle
Dies funktioniert nicht mit CSS-Transformationen. Der Versatz wird von der Transformation beeinflusst, die äußere Breite (und Breite) jedoch nicht.
Jonathan.
2
Dies ist der Versatz von der rechten Seite des Fensters. Den Versatz von der linken Seite des Fensters finden Sie in der Antwort von cdZ .
Codebling
Die äußerste rechte Kante eines Elements befindet sich eher "nativ" $whatever[0].getBoundingClientRect().right. Dies ist relativ zum linken Rand des Fensters.
Pstanton
Danke brendon. Hilfreiche Antwort.
28
var $whatever        = $('#whatever');
var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Referenz: .outerWidth ()

jAndy
quelle
1
Ich denke, ich muss sie hinzufügen und dann minus 1. Wenn die Breite 2 ist, dann ist links bei 10 und rechts ist nicht bei 12, sondern 11.
Nichtpolarität
31
Dies ist eine falsche Antwort. In CSS impliziert "links" "den Versatz des äußersten linken Punkts des Elements von der linken Seite des Fensters / übergeordneten Elements" und "rechts" den Versatz des äußersten rechten Punkts des Elements von der rechten Seite des Fensters / übergeordneten Elements ". Die richtige Antwort wäre also:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
Brendon Crawford
5
@BrendonCrawford Sie sollten diesen Kommentar in eine Antwort verschieben.
Gary
3
Eine Notiz an alle, die durchkommen - die obige Antwort wurde bearbeitet, um den Kommentar von Brendon korrekt wiederzugeben.
Chris Marasti-Georg
16

Vielleicht verstehe ich Ihre Frage falsch, aber der Versatz soll Ihnen zwei Variablen geben: eine horizontale und eine vertikale. Dies definiert die Position des Elements. Was Sie also suchen, ist:

$("#whatever").offset().left

und

$("#whatever").offset().top

Wenn Sie wissen möchten, wo sich die richtige Grenze Ihres Elements befindet, sollten Sie Folgendes verwenden:

$("#whatever").offset().left + $("#whatever").outerWidth()
Greg
quelle
8

Nur eine Ergänzung zu dem, was Greg gesagt hat:

$ ("# was auch immer"). offset (). left + $ ("# was auch immer"). äußere Breite ()

Dieser Code erhält die richtige Position relativ zur linken Seite. Wenn beabsichtigt wurde, die rechte Seitenposition relativ zur rechten zu erhalten (wie bei Verwendung der CSS- rightEigenschaft), ist eine Ergänzung des Codes wie folgt erforderlich:

$ ("# parent_container"). innerWidth () - ($ ("# was auch immer"). offset (). left + $ ("# was auch immer"). äußereWidth ())

Dieser Code ist nützlich in Animationen, in denen Sie die rechte Seite als festen Anker festlegen müssen, wenn Sie die rightEigenschaft zunächst nicht in CSS festlegen können .

cdZ
quelle
5

Eigentlich funktionieren diese nur, wenn das Fenster von der oberen linken Position überhaupt nicht gescrollt wird.
Sie müssen die Bildlaufwerte des Fensters subtrahieren, um einen Versatz zu erhalten, der zum Neupositionieren von Elementen nützlich ist, damit sie auf der Seite bleiben:

var offset = $('#whatever').offset();

offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true));
jrosen
quelle
5

Es gibt eine native DOM-API, die dies sofort erreicht - getBoundingClientRect:

document.querySelector("#whatever").getBoundingClientRect().right
Barney
quelle
2
GetBoundingClientRect gibt jedoch relativ zum Ansichtsfenster und nicht relativ zum Dokument zurück, was offset () bietet.
Sai Dubbaka
4

Brendon Crawford hatte hier die beste Antwort (im Kommentar), also werde ich sie zu einer Antwort verschieben, bis er es tut (und vielleicht ein wenig erweitern).

var offset = $('#whatever').offset();

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));
Gary
quelle
2

Den Ankerpunkt von a bekommen div/table (left) = $("#whatever").offset().left;- ok!

Um den Ankerpunkt von a zu erhalten div/table (right), können Sie den folgenden Code verwenden.

 $("#whatever").width();
hyp3r byt3
quelle