Metoda offset

Metoda offset omogoča pridobivanje položaja elementa glede na dokument, za razliko od metode position, ki pridobi koordinate glede na odmike starša. Metoda offset je bolj uporabna pri pozicioniranju novega elementa nad obstoječim za globalne manipulacije, na primer za implementacijo vlečenja in spuščanja (drag-and-drop). Kot rezultat metoda vrne objekt, ki vsebuje lastnosti top in left. Napake pri izračunih se lahko pojavijo, če uporabnik spreminja velikost strani. Tudi metoda ne pridobi koordinat skritih elementov.

Sintaksa

Pridobi trenutne koordinate. V nekaterih primerih so lahko pridobljene vrednosti delne:

$(selektor).offset();

Za spremembo koordinat elementa je potrebno poslati objekt, ki vsebuje lastnosti top in left:

$(selektor).offset({top: 40, left: 40});

Prav tako lahko uporabimo določeno funkcijo za vsak element v nizu. Pri tem funkcija kot prvi parameter prejme številko elementa v nizu, kot drugi parameter pa objekt s koordinatami top in left. this znotraj funkcije bo kazal na trenutni element. Vrednosti koordinat elementa se bodo spremenile na tiste, ki jih vrne funkcija:

$(selektor).width(function(številka v nizu, {trenutne koordinate}));

Primer

Pridobimo položaj diva (zeleni kvadrat), z uporabo metode offset, nato pa z dostopom do ključev pridobljenega objekta izpišemo to informacijo:

<div id="result">klikni kvadrat ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Primer

Spremenimo koordinate drugega odstavka:

<p style="margin-left: 10px;">besedilo1</p>
<p style="margin-left: 10px;">besedilo2</p>

$('p').last().offset({top: 40, left: 60});

Glej tudi

metoda position,
ki omogoča pridobivanje trenutnih koordinat elementa
metoda offsetParent,
ki omogoča pridobitev najbližjega pozicioniranega prednika elementa
metoda css,
ki omogoča pridobivanje in spreminjanje CSS stilov elementa