Metod offset

Metod offset omogućava dobijanje pozicije elementa u odnosu na dokument, za razliku od metoda position, koji dobija koordinate u odnosu na margine roditelja. Metod offset je korisniji pri pozicioniranju novog elementa preko postojećeg za globalne manipulacije, na primer, za implementaciju prevlačenja (drag-and-drop). Svojim rezultatom, metod vraća objekat, koji sadrži svojstva top i left. Greške u proračunima se mogu javiti ako korisnik menja veličinu stranice. Takođe, metod ne dobija koordinate skrivenih elemenata.

Sintaksa

Dobiti trenutne koordinate. U nekim slučajevima dobijene vrednosti mogu biti decimalne:

$(selektor).offset();

Da biste promenili koordinate elementa, potrebno je proslediti objekat, koji sadrži svojstva top i left:

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

Takođe možemo primeniti zadatu funkciju na svaki element u skupu. Pri tome, prvi parametar funkcije dobija redni broj elementa u skupu, a drugi parametar - objekat sa koordinatama top i left. this unutar funkcije će pokazivati na trenutni element. Vrednosti koordinata elementa će se promeniti na one, koje funkcija vrati:

$(selektor).offset(function(redni broj u skupu, {trenutne koordinate}));

Primer

Hajde da dobijemo poziciju div-a (zelenog kvadrata), pomoću metoda offset, a zatim, pristupivši ključevima dobijenog objekta, prikažemo tu informaciju:

<div id="result">klikni na 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

Hajde da promenimo koordinate drugog pasusa:

<p style="margin-left: 10px;">tekst1</p>
<p style="margin-left: 10px;">tekst2</p>

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

Vidite takođe

metod position,
koji omogućava dobijanje trenutnih koordinata elementa
metod offsetParent,
koji omogućava dobijanje najbližeg pozicioniranog pretka elementa
metod css,
koji omogućava dobijanje i promenu CSS stilova elementa