Pozicionēšana jQuery

Lai strādātu ar elementu koordinātām jQuery ir metodes position un offset.

Šīs metodes kalpo, lai iegūtu vai mainītu elementa pašreizējās koordinātas un rezultātā atgriež objektu, kas satur īpašības top un left.

Kļūdas aprēķinos var rasties, ja lietotājs maina lapas izmērus. Arī metodes neiegūst slēpto elementu koordinātas.

Metode offset iegūst elementa pozīciju attiecībā pret dokumentu, bet position pozīciju attiecībā pret vecāka elementa atkāpēm.

Pieņemsim, ka mums ir šāds HTML kods:

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

Paragrāfiem ir piesaistīti CSS stili:

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

Iegūsim div test pozīciju ar šīm metodēm un, piekļūstot iegūtā objekta atslēgām, izvadīsim šo informāciju zemāk paragrāfos:

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