Meetod offset

Meetod offset võimaldab hankida elemendi positsiooni dokumendi suhtes, erinevalt meetodist position, mis saab koordinaadid suhteliselt vanema elemendi taanetesse. Meetod offset on kasulikum uue elemendi positsioneerimisel olemasoleva elemendi kohale globaalsete manipuleerimiste jaoks, näiteks lohistamise (drag-and-drop) rakendamiseks. Meetod tagastab tulemusena objekti, mis sisaldab omadusi top ja left. Arvutusvead võivad tekkida, kui kasutaja muudab lehe suurust. Samuti meetod ei saa varjatud elementide koordinaate.

Süntaks

Hankida praegused koordinaadid. Mõnel juhul võivad saadud väärtused olla murdarvud:

$(valija).offset();

Elemendi koordinaatide muutmiseks tuleb edastada objekt, mis sisaldab omadusi top ja left:

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

Samuti saame rakendada määratud funktsiooni iga elemendi jaoks komplektis. Sel juhul saab funktsioon esimese parameetrina elemendi numbri komplektis ja teise parameetrina - objekti koordinaatidega top ja left. this funktsiooni sees viitab praegusele elemendile. Elemendi koordinaatide väärtused muutuvad nendeks, mida funktsioon tagastab:

$(valija).width(function(number komplektis, {praegused koordinaadid}));

Näide

Hankigem divi (roheline ruut) positsioon, kasutades meetodit offset, ja seejärel, pöördudes saadud objekti võtmete poole, väljastame selle info:

<div id="result">kliki ruudule ...</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('Vasak: ' + offset.left + ', Üleval: ' + offset.top);
});

Näide

Muudame teise lõigu koordinaate:

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

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

Vaata ka

meetod position,
mis võimaldab hankida praegused elemendi koordinaadid
meetod offsetParent,
mis võimaldab hankida lähima positsioneeritud eellase elemendist
meetod css,
mis võimaldab hankida ja muuta elemendi CSS stiile