De positie van de onderkant van een div vinden met jQuery

Ik heb een div en wil de onderste positie vinden. Ik kan de bovenste positie van de Div op deze manier vinden, maar hoe vind ik de onderste positie?

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

Antwoord 1, autoriteit 100%

Voeg de buitenste hoogte toe aan de bovenkant en je hebt de onderkant, relatief aan het bovenliggende 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

Bij absoluut gepositioneerde elementen of bij positionering ten opzichte van het document, moet u in plaats daarvan evalueren met behulp van offset:

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

Zoals aangegeven door trnelsonwerkt dit niet 100% van de tijd. Om deze methode voor gepositioneerde elementen te gebruiken, moet u ook rekening houden met offset. Zie de volgende code voor een voorbeeld.

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

Antwoord 2, autoriteit 9%

EDIT: deze oplossing staat nu ook in het oorspronkelijke antwoord.

Het geaccepteerde antwoord is niet helemaal correct. U zou de functie position() niet moeten gebruiken, omdat deze relatief is ten opzichte van de ouder. Als je globale positionering doet (in de meeste gevallen?) zou je alleen de offset top met de buitenste hoogte als volgt moeten toevoegen:

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

De documenten http://api.jquery.com/offset/

Antwoord 3, autoriteit 3%

var bottom = $('#bottom').position().top + $('#bottom').height();

Antwoord 4, autoriteit 3%

De antwoorden tot nu toe zullen werken.. als je alleen de hoogte wilt gebruiken zonder opvulling, randen, enz.

Als u rekening wilt houden met opvulling, randen en marge, moet u .outerHeightgebruiken.

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

Antwoord 5

De onderste is de top+ de outerHeight, niet de height, omdat het de marge of opvulling niet zou bevatten.

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

Antwoord 6

var top = ($('#bottom').position().top) + ($('#bottom').height());

Antwoord 7

Dit is een van die gevallen waarin jQuery het eigenlijk ingewikkelder maakt dan wat de DOM al biedt.

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

Antwoord 8

gebruik dit script om het einde van div te berekenen

$('#bottom').offset().top +$('#bottom').height()