Metode offset

Metode offset ļauj iegūt elementa pozīciju attiecībā pret dokumentu, atšķirībā no metodes position, kura iegūst koordinātas attiecībā pret vecākelementa atkāpēm. Metode offset ir izmantojamāka, pozicionējot jaunu elementu virs esoša elementa globālām manipulācijām, piemēram, lai īstenotu vilkšanu un nomešanu (drag-and-drop). Metodes rezultātā tiek atgriezts objekts, kas satur īpašības top un left. Kļūdas aprēķinos var rasties, ja lietotājs maina lapas izmērus. Tāpat metode neiegūst slēpto elementu koordinātas.

Sintakse

Iegūt pašreizējās koordinātas. Dažos gadījumos iegūtās vērtības var būt daļskaitļi:

$(selector).offset();

Lai mainītu elementa koordinātas, ir jānodod objekts, kas satur īpašības top un left:

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

Mēs varam arī piemērot noteiktu funkciju katram elementam komplektā. Šajā gadījumā pirmais funkcijas parametrs saņems elementa numuru komplektā, bet otrais parametrs - objektu ar koordinātām top un left. this funkcijas iekšienē norādīs uz pašreizējo elementu. Elementa koordinātu vērtības tiks mainītas uz tām, ko atgriezīs funkcija:

$(selector).width(function(index, {current coordinates}));

Piemērs

Iegūsim diva (zaļā kvadrāta) pozīciju, izmantojot metodi offset, un pēc tam, piekļūstot iegūtā objekta atslēgām, izvadīsim šo informāciju:

<div id="result">click a square ...</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);
});

Piemērs

Mainīsim otrā rindkopas koordinātas:

<p style="margin-left: 10px;">text1</p>
<p style="margin-left: 10px;">text2</p>

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

Skatiet arī

metode position,
kura ļauj iegūt pašreizējās elementa koordinātas
metode offsetParent,
kura ļauj iegūt tuvāko pozicionēto elementa priekšteci
metode css,
kura ļauj iegūt un mainīt elementa CSS stilus