Finden der Position des Bodens eines Div mit jquery

74

Ich habe ein Div und möchte die unterste Position finden. Ich kann die obere Position des Div so finden, aber wie finde ich die untere Position?

var top = $('#bottom').position().top;
return top;
lagwagon223
quelle

Antworten:

160

Fügen Sie die äußere Höhe oben hinzu und Sie haben die untere relativ zum übergeordneten Element:

var $el = $('#bottom');  //record the elem so you don't crawl the DOM everytime  
var bottom = $el.position().top + $el.outerHeight(true); // passing "true" will also include the top and bottom margin

Bei absolut positionierten Elementen oder bei der Positionierung relativ zum Dokument müssen Sie stattdessen den Versatz verwenden:

var bottom = $el.offset().top + $el.outerHeight(true);

Wie von Trnelson hervorgehoben, funktioniert dies nicht 100% der Zeit. Um diese Methode für positionierte Elemente zu verwenden, müssen Sie auch den Versatz berücksichtigen. Ein Beispiel finden Sie im folgenden Code.

var bottom = $el.position().top + $el.offset().top + $el.outerHeight(true);
user1026361
quelle
6
Ich habe eine Bearbeitung eingereicht, die jedoch abgelehnt wurde. Diese Antwort ist in diesem Zusammenhang technisch korrekt, löst das Problem jedoch nicht zu 100%. Um diese Methode für positionierte Elemente zu verwenden, müssen Sie auch den Versatz berücksichtigen:var bottom = $('#bottom').position().top+$('#bottom').offset().top+$('#bottom').outerHeight(true)
Trnelson
Seltsam ... Ich habe die Bearbeitung nicht aktiv abgelehnt. In jedem Fall haben Sie absolut (heh) Recht. Wenn Sie mit positionierten Elementen arbeiten, müssen Sie den Versatz berücksichtigen
user1026361
4
Ab dem 19.07.2017 hat das Wort "wahr" in der letzten Zeile dieser Antwort einen bösen unsichtbaren Charakter, der Ihren Code beim Kopieren / Einfügen beschädigt (bei mir mit Atom). Das Zeichen steht zwischen dem 't' und dem 'r' im Wort 'true'. Ich habe versucht, die Antwort zu bearbeiten, aber sie wurde abgelehnt. Ich gehe davon aus, dass diejenigen, die es abgelehnt haben, meine Bearbeitungsbeschreibung nicht gelesen haben. Es kann keinen anderen logischen, nicht bösen Grund geben, absichtlich ein unsichtbares Zeichen zu behalten, das den Code der Leute bricht.
Mike Willis
2
@ MikeWillis Zum Glück habe ich Ihren Kommentar gelesen und da ich mehr Ruf als Sie habe, hoffe ich, dass meine Bearbeitung bis zum Ende der Zeit dort bleibt. Ähm, Ende von SO. Ähm, das Gleiche ... :)
sjngm
@sjngm haha ​​schön, ja ich hoffe es bleibt auch an Ort und Stelle!
Mike Willis
13

BEARBEITEN: Diese Lösung ist jetzt auch in der ursprünglichen Antwort.

Die akzeptierte Antwort ist nicht ganz richtig. Sie sollten die Funktion position () nicht verwenden, da sie relativ zum übergeordneten Element ist. Wenn Sie eine globale Positionierung durchführen (in den meisten Fällen?), Sollten Sie nur die versetzte Oberseite mit der äußeren Höhe wie folgt hinzufügen:

var actualBottom = $(selector).offset().top + $(selector).outerHeight(true);

Die Dokumente http://api.jquery.com/offset/

yoyodunno
quelle
5
var bottom = $('#bottom').position().top + $('#bottom').height();
Jish
quelle
5

Die bisherigen Antworten funktionieren. Wenn Sie nur die Höhe ohne Polsterung, Ränder usw. verwenden möchten.

Wenn Sie Auffüllung, Rahmen und Rand berücksichtigen möchten, sollten Sie verwenden .outerHeight.

var bottom = $('#bottom').position().top + $('#bottom').outerHeight(true);
Schlau
quelle
1

Das untere ist das top+ das outerHeight, nicht dasheight , da es den Rand oder die Polsterung nicht enthalten würde.

var $bot,
    top,
    bottom;
$bot = $('#bottom');
top = $bot.position().top;
bottom = top + $bot.outerHeight(true); //true is necessary to include the margins
zzzzBov
quelle
0
var top = ($('#bottom').position().top) + ($('#bottom').height());
Cecil Theodore
quelle
0

Dies ist einer der Fälle, in denen jquery es tatsächlich komplizierter macht als das, was das DOM bereits bereitstellt.

let { top, bottom, height, width, //etc } = $('#bottom')[0].getBoundingClientRect();
return top;
Michael Aaron Wilson
quelle
0

Verwenden Sie dieses Skript, um das Ende von div zu berechnen

$('#bottom').offset().top +$('#bottom').height()
fatemeh sadeghi
quelle