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:

<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:

#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:

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