Positionering in jQuery

Voor het werken met coördinaten van elementen in jQuery zijn er de methoden position en offset.

Deze methoden worden gebruikt om de huidige coördinaten van een element op te halen of te wijzigen en retourneren als resultaat een object met de eigenschappen top en left.

Fouten in berekeningen kunnen optreden als de gebruiker de afmetingen van de pagina wijzigt. Ook kunnen de methoden geen coördinaten van verborgen elementen ophalen.

De methode offset haalt de positie van het element op ten opzichte van het document, en position de positie van het element ten opzichte van de marges van de ouder.

Stel dat we de volgende HTML-code hebben:

html<div id="parent">
<p id="test">tekst</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

Er zijn CSS-stijlen gekoppeld aan de alinea's:

css#parent {
  width: 150px;
  border: 1px solid blueviolet;
}
#test {
  margin: 5px;
  text-align: center;
  outline: 1px solid green;
}

Laten we de positie van de div test ophalen met deze methoden, en door naar de sleutels van het verkregen object te verwijzen, deze informatie hieronder in alinea's weergeven:

javascriptlet offset = $('#test').offset();
$('#text1').text(
  '(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
  '(POSITION()) left: ' + position.left + ', top: ' + position.top
);