Pozicionálás jQuery-ben

A jQuery-ben az elemek koordinátáinak kezelésére létezik a position és a offset metódus.

Ezek a metódusok az elem aktuális koordinátáinak lekérésére vagy módosítására szolgálnak, és eredményként egy objektumot adnak vissza, amely a top és a left tulajdonságokat tartalmazza.

Számítási hibák adódhatnak, ha a felhasználó megváltoztatja az oldal méretét. Továbbá a metódusok nem képesek lekérni a rejtett elemek koordinátáit.

A offset metódus az elem pozícióját a dokumentumhoz viszonyítva kapja meg, míg a position metódus az elem pozícióját a szülő margóival viszonyítva.

Tegyük fel, hogy a következő HTML kódunk van:

html<div id="parent">
<p id="test">szöveg</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

A bekezdésekhez CSS stílusok vannak hozzárendelve:

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

Most kérjük le a test div pozícióját ezekkel a metódusokkal, és a kapott objektum kulcsaira hivatkozva jelenítsük meg ezt az információt lent a bekezdésekben:

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