Positionering i jQuery

För att arbeta med elementens koordinater i jQuery finns metoderna position och offset.

Dessa metoder används för att erhålla eller ändra elementets aktuella koordinater och returnerar som resultat ett objekt som innehåller egenskaperna top och left.

Fel i beräkningarna kan uppstå om användaren ändrar sidans storlek. Metoderna kan inte heller erhålla dolda elements koordinater.

Metoden offset erhåller elementets position i förhållande till dokumentet, medan position erhåller positionen för elementet i förhållande till förälderns marginaler.

Låt oss säga att vi har följande HTML-kod:

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

Följande CSS-stilar är kopplade till styckena:

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

Låt oss erhålla positionen för div-elementet test med dessa metoder, och genom att åberaka nycklarna i det erhållna objektet, visa denna information nedanför i styckena:

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