Metodas offset

Metodas offset leidžia gauti elemento poziciją dokumento atžvilgiu, skirtingai nuo metodo position, kuris gauna koordinates tėvinio elemento atžvilgiu. Metodas offset yra naudingesnis pozicionuojant naują elementą ant esamo elemento globalioms manipuliacijoms, pavyzdžiui, įgyvendinant vilkimo ir numetimo (drag-and-drop) funkciją. Metodas grąžina objektą, kuriame yra savybės top ir left. Skaičiavimo klaidos gali atsirasti, jei naudotojas keičia puslapio dydį. Taip pat metodas negali gauti paslėptų elementų koordinačių.

Sintaksė

Gauti dabartines koordinates. Kai kuriais atvejais gautos reikšmės gali būti trupmeninės:

$(selektorius).offset();

Norint pakeisti elemento koordinates, reikia perduoti objektą, kuriame yra savybės top ir left:

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

Taip pat galime pritaikyti nurodytą funkciją kiekvienam elementui rinkinyje. Šiuo atveju pirmuoju parametru funkcija gaus elemento numerį rinkinyje, o antruoju parametru - objektą su koordinatėmis top ir left. this funkcijos viduje rodys į dabartinį elementą. Elemento koordinatės pasikeis į tas, kurias grąžins funkcija:

$(selektorius).width(function(numeris rinkinyje, {dabartinės koordinatės}));

Pavyzdys

Gaukime div'o (žalio kvadrato) poziciją, naudodami metodą offset, o tada, kreipdamiesi į gauto objekto raktus, išveskime šią informaciją:

<div id="result">spustelkite 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('Kairė: ' + offset.left + ', Viršus: ' + offset.top);
});

Pavyzdys

Pakeiskime antros pastraipos koordinates:

<p style="margin-left: 10px;">tekstas1</p>
<p style="margin-left: 10px;">tekstas2</p>

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

Taip pat žiūrėkite

metodas position,
kuris leidžia gauti dabartines elemento koordinates
metodas offsetParent,
kuris leidžia gauti artimiausią pozicionuotą elemento protėvį
metodas css,
kuris leidžia gauti ir keisti elemento CSS stilius