Metoden offset

Metoden offset lar deg hente posisjonen til et element i forhold til dokumentet, i motsetning til metoden position, som henter koordinater i forhold til foreldreelementets innrykk. Metoden offset er mer nyttig ved posisjonering av et nytt element over et eksisterende element for globale manipulasjoner, for eksempel for å implementere dra og slipp (drag-and-drop). Som resultat returnerer metoden et objekt som inneholder egenskapene top og left. Feil i beregninger kan oppstå hvis brukeren endrer størrelsen på siden. Metoden henter heller ikke koordinater for skjulte elementer.

Syntaks

Hent nåværende koordinater. I noen tilfeller kan de hentede verdiene være brøkdeler:

javascript$(selector).offset();

For å endre koordinatene til et element, må du sende et objekt som inneholder egenskapene top og left:

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

Vi kan også bruke en angitt funksjon på hvert element i settet. I dette tilfellet vil funksjonen motta nummeret til elementet i settet som første parameter, og som andre parameter - et objekt med koordinatene top og left. this inni funksjonen vil peke på det nåværende elementet. Koordinatverdiene til elementet vil endres til de som returneres av funksjonen:

javascript$(selector).width(function(indeks i settet, {nåværende koordinater}));

Eksempel

La oss hente posisjonen til en div (den grønne firkanten), ved hjelp av metoden offset, og deretter, ved å henvise til nøklene i det oppnådde objektet, vise denne informasjonen:

html<div id="result">klikk på en firkant ...</div>
<div id="test"></div>

css#test {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  background: green;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

javascript$('*', document.body).click(function(event) {
  let offset = $(this).offset();
  
  event.stopPropagation();
  $('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Eksempel

La oss endre koordinatene til det andre avsnittet:

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

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

Se også