Njia ya offset

Njia offset inaruhusu kupata nafasi ya kipengele ukirejelea hati, tofauti na njia position, ambayo hupata kuratibu ukirejelea mipaka ya mzazi. Njia offset ni muhimu zaidi wakati wa kuweka nafasi ya kipengele kipya juu ya kile kilichopo kwa ajili ya ubadilishaji wa kimataifa, kwa mfano, kwa ajili ya utekelezaji wa kuburuta na kuangusha (drag-and-drop). Kwa matokeo yake, njia hurudisha kitu, kilicho na sifa top na left. Makosa katika mahesabu yanaweza kutokea, ikiwa mtumiaji anabadilisha vipimo vya ukurasa. Pia njia haipati kuratibu za vipengele vilivyofichika.

Kisarufu

Pata kuratibu za sasa. Katika hali nyingine maadili yaliyopatikana yanaweza kuwa ya sehemu:

$(kichaguli).offset();

Ili kubadilisha kuratibu za kipengele, ni lazima upitishe kitu, kilicho na sifa top na left:

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

Pia tunaweza kutumia kitendo ulichopewa kwa kila kipengele katika seti. Wakati huo kigezo cha kwanza cha kitendo kitapata nambari ya kipengele katika seti, na kigezo cha pili - kitu chenye kuratibu top na left. this ndani ya kitendo kitaonyesha kipengele cha sasa. Thamani za kuratibu za kipengele zitabadilika kuwa zile, ambazo kitendo kitarudisha:

$(kichaguli).width(function(nambari katika seti, {kuratibu za sasa}));

Mfano

Wacha tupate nafasi ya divi (mraba wa kijani), kwa kutumia njia offset, kisha, tukirejelea vitufunguo vya kitu kilichopatikana, tuonyeshe habari hii:

<div id="result">bonyeza mraba ...</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('Kushoto: ' + offset.left + ', Juu: ' + offset.top);
});

Mfano

Wacha tubadilishe kuratibu za aya ya pili:

<p style="margin-left: 10px;">maandishi1</p>
<p style="margin-left: 10px;">maandishi2</p>

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

Angalia pia

njia position,
ambayo inaruhusu kupata za sasa kuratibu za kipengele
njia offsetParent,
ambayo inaruhusu kupata mzazi wa karibu aliyewekwa nafasi ya kipengele
njia css,
ambayo inaruhusu kupata na kubadilisha mitindo ya CSS ya kipengele