Positsioneerimine jQuery-s

Elementide koordinaatidega töötamiseks jQuery-s on meetodid position ja offset.

Need meetodid on mõeldud elemendi praeguste koordinaatide saamiseks või muutmiseks ning tagastavad tulemusena objekti, mis sisaldab omadusi top ja left.

Arvutusvead võivad tekkida, kui kasutaja muudab lehe suurust. Samuti meetodid ei saa varjatud elementide koordinaate.

Meetod offset saab elemendi positsiooni dokumendi suhtes, aga position elemendi positsiooni vanema elemendi marginaalide suhtes.

Olgem meil järgmine HTML kood:

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

Lõikudele on seotud CSS stiilid:

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

Saagem div-i test positsiooni nende meetoditega ning, pöördudes saadud objekti võtmete poole, väljastame selle info allpool lõikudesse:

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