offset-metodi

offset-metodi mahdollistaa elementin sijainnin saamisen dokumenttiin nähden, toisin kuin position-metodi, joka saa koordinaatit suhteessa vanhemman marginaaleihin. offset-metodi on hyödyllisempi uuden elementin sijoittamisessa olemassa olevan päälle globaaleja manipulointeja varten, esimerkiksi raahauksen toteuttamiseen (drag-and-drop). Tuloksena metodi palauttaa objektin, joka sisältää ominaisuudet top ja left. Laskentavirheitä voi ilmetä, jos käyttäjä muuttaa sivun kokoa. Metodi ei myöskään saa piilotettujen elementtien koordinaatteja.

Syntaksi

Hanki nykyiset koordinaatit. Joissakin tapauksissa sadatut arvot voivat olla murtolukuja:

$(valitsin).offset();

Muuttaaksesi elementin koordinaatteja, tulee lähettää objekti, joka sisältää ominaisuudet top ja left:

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

Voimme myös soveltaa annettua funktiota jokaiseen elementtiin joukossa. Tässä tapauksessa funktio saa ensimmäisenä parametrina elementin numeron joukossa, ja toisena parametrina - objektin koordinaatteineen top ja left. this funktion sisällä viittaa nykyiseen elementtiin. Elementin koordinaattien arvot muuttuvat niiksi, jotka funktio palauttaa:

$(valitsin).width(function(numero joukossa, {nykyiset koordinaatit}));

Esimerkki

Haetaan divin (vihreän neliön) sijainti, offset-metodin avulla, ja sitten, viitaten saadun objektin avaimiin, tulostetaan tämä tieto:

<div id="result">klikkaa neliötä ...</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);
});

Esimerkki

Muutetaan toisen kappaleen koordinaatit:

<p style="margin-left: 10px;">teksti1</p>
<p style="margin-left: 10px;">teksti2</p>

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

Katso myös

metodi position,
joka mahdollistaa elementin nykyisten koordinaattien saamisen
metodi offsetParent,
joka mahdollistaa lähimmän positioidun elementin esiivanhemman saamisen
metodi css,
joka mahdollistaa elementin CSS-tyylien saamisen ja muuttamisen