Posisjonering i jQuery

For å jobbe med elementkoordinater i jQuery finnes metodene position og offset.

Disse metodene brukes for å hente eller endre nåværende elementkoordinater og returnerer som resultat et objekt som inneholder egenskapene top og left.

Feil i beregninger kan oppstå hvis brukeren endrer størrelsen på siden. Metodene henter heller ikke koordinatene til skjulte elementer.

Metoden offset henter elementets posisjon i forhold til dokumentet, mens position henter posisjonen i forhold til forelderens marginer.

La oss si at vi har følgende HTML-kode:

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

CSS-stiler er knyttet til avsnittene:

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

La oss hente posisjonen til div-en test med disse metodene, og ved å få tilgang til nøklene i det resulterende objektet, vise denne informasjonen nedenfor i avsnittene:

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
);