Metoda offset

Metoda offset lejon marrjen e pozicionit të elementit në lidhje me dokumentin, ndryshe nga metoda position, e cila merr koordinatat në lidhje me margjinitë e prindit. Metoda offset është më e dobishme kur pozicionohet një element i ri mbi një ekzistues për manipulime globale, për shembull, për të implementuar zvarritje (drag-and-drop). Si rezultat, metoda kthen një objekt, që përmban vetitë top dhe left. Gabimet në llogaritje mund të ndodhin nëse përdoruesi ndryshon përmasat e faqes. Gjithashtu metoda nuk merr koordinatat e elementeve të fshehur.

Sintaksa

Merrni koordinatat aktuale. Në disa raste vlerat e marra mund të jenë thyesore:

$(selector).offset();

Për të ndryshuar koordinatat e elementit, duhet të kaloni një objekt, që përmban vetitë top dhe left:

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

Gjithashtu ne mund të aplikojmë një funksion të caktuar për çdo element në grup. Në këtë rast, parametri i parë i funksionit merr numrin e elementit në grup, ndërsa parametri i dytë - një objekt me koordinatat top dhe left. this brenda funksionit do të tregojë elementin aktual. Vlerat e koordinatave të elementit do të ndryshohen në ato, që kthen funksioni:

$(selector).width(function(numri në grup, {koordinatat aktuale}));

Shembull

Le të marrim pozicionin e div-it (katrori i gjelbër), duke përdorur metodën offset, dhe pastaj, duke iu referuar çelësave të objektit të marrë, të shfaqim këtë informacion:

<div id="result">kliko një katror ...</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);
});

Shembull

Le të ndryshojmë koordinatat e paragrafit të dytë:

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

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

Shihni gjithashtu

metoda position,
e cila lejon marrjen e koordinatave aktuale të elementit
metoda offsetParent,
e cila lejon marrjen e paraardhësit më të afërt të pozicionuar të elementit
metoda css,
e cila lejon marrjen dhe ndryshimin e stileve CSS të elementit