Metoden offset

Metoden offset gør det muligt at hente elementers position i forhold til dokumentet, i modsætning til metoden position, som henter koordinater i forhold til forældreelementets margener. Metoden offset er mere nyttig, når man positionerer et nyt element oven på et eksisterende element til globale manipulationer, for eksempel til implementering af træk-og-slip (drag-and-drop). Metoden returnerer et objekt, der indeholder egenskaberne top og left. Fejl i beregningerne kan opstå, hvis brugeren ændrer sidens størrelse. Metoden kan heller ikke hente koordinater for skjulte elementer.

Syntaks

Hent aktuelle koordinater. I nogle tilfælde kan de hentede værdier være brøker:

javascript$(selektor).offset();

For at ændre elementets koordinater skal man sende et objekt, der indeholder egenskaberne top og left:

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

Vi kan også anvende en given funktion på hvert element i sættet. Her vil funktionen som første parameter modtage elementets nummer i sættet, og som anden parameter - et objekt med koordinaterne top og left. this inde i funktionen vil pege på det aktuelle element. Elementets koordinatværdier vil blive ændret til dem, som funktionen returnerer:

javascript$(selektor).width(function(nummer i sættet, {aktuelle koordinater}));

Eksempel

Lad os hente positionen af div'en (den grønne firkant) ved hjælp af metoden offset, og derefter, ved at tilgå nøglerne i det modtagne objekt, udskrive denne information:

html<div id="result">klik 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

Lad os ændre koordinaterne for andet afsnit:

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å