De offset methode

De methode offset maakt het mogelijk om de positie van een element ten opzichte van het document te verkrijgen, in tegenstelling tot de methode position, die de coördinaten ten opzichte van de offsets van de ouder verkrijgt. De methode offset is nuttiger bij het positioneren van een nieuw element bovenop een bestaand element voor globale manipulaties, bijvoorbeeld voor het implementeren van slepen-en-neerzetten (drag-and-drop). Als resultaat retourneert de methode een object, dat de eigenschappen top en left bevat. Fouten in de berekeningen kunnen optreden als de gebruiker de afmetingen van de pagina wijzigt. Ook verkrijgt de methode geen coördinaten van verborgen elementen.

Syntaxis

Huidige coördinaten verkrijgen. In sommige gevallen kunnen de verkregen waarden fractioneel zijn:

$(selector).offset();

Om de coördinaten van een element te wijzigen, moet een object worden doorgegeven, dat de eigenschappen top en left bevat:

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

We kunnen ook een opgegeven functie toepassen op elk element in de set. Hierbij ontvangt de functie als eerste parameter de index van het element in de set, en als tweede parameter - een object met de coördinaten top en left. this binnen de functie zal verwijzen naar het huidige element. De coördinaatwaarden van het element veranderen naar die, die door de functie worden geretourneerd:

$(selector).width(function(index in set, {huidige coördinaten}));

Voorbeeld

Laten we de positie van de div (groene vierkant) verkrijgen, met behulp van de methode offset, en vervolgens, door toegang te krijgen tot de sleutels van het verkregen object, deze informatie weergeven:

<div id="result">klik op een vierkant ...</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);
});

Voorbeeld

Laten we de coördinaten van de tweede alinea wijzigen:

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

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

Zie ook

methode position,
die het mogelijk maakt om de huidige coördinaten van een element te verkrijgen
methode offsetParent,
die het mogelijk maakt om de dichtstbijzijnde gepositioneerde voorouder van een element te verkrijgen
methode css,
die het mogelijk maakt om CSS-stijlen van een element te verkrijgen en te wijzigen