offset-metode

Die metode offset laat toe om die posisie van 'n element relatief tot die dokument te verkry, in teenstelling met die metode position, wat koördinate relatief tot die ouer se spasie verkry. Die metode offset is meer nuttig wanneer 'n nuwe element bo-op 'n bestaande een geplaas word vir globale manipulasies, byvoorbeeld, om sleep-en-plaats (drag-and-drop) te implementeer. As resultaat lewer die metode 'n objek wat die eienskappe top en left bevat. Foute in berekeninge kan voorkom as die gebruiker die bladsygrootte verander. Die metode kan ook nie die koördinate van versteekte elemente verkry nie.

Sintaksis

Verkry die huidige koördinate. In sommige gevalle kan die verkryde waardes desimale wees:

$(selekteerder).offset();

Om die koördinate van 'n element te verander, moet 'n objek wat die eienskappe top en left bevat, oorgedra word:

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

Ons kan ook 'n gegewe funksie op elke element in die versameling toepas. Die funksie ontvang as eerste parameter die nommer van die element in die versameling, en as tweede parameter - 'n objek met die koördinate top en left. this binne die funksie sal verwys na die huidige element. Die koördinaatwaardes van die element sal verander na dié wat deur die funksie terugbesorg word:

$(selekteerder).width(function(nommer in versameling, {huidige koördinate}));

Voorbeeld

Kom ons verkry die posisie van die div (groen vierkant), met behulp van die metode offset, en dan, deur na die sleutels van die verkryde objek te verwys, hierdie inligting uitskryf:

<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);
});

Voorbeeld

Kom ons verander die koördinate van die tweede paragraaf:

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

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

Sien ook

metode position,
wat toelaat om die huidige koördinate van 'n element te verkry
metode offsetParent,
wat toelaat om die naaste geposisioneerde voorouer van 'n element te verkry
metode css,
wat toelaat om CSS style van 'n element te verkry en te verander