Metoden offset

Metoden offset låter dig få elementets position i förhållande till dokumentet, till skillnad från metoden position, som får koordinater i förhållande till förälderns marginaler. Metoden offset är mer användbar när man positionerar ett nytt element över ett befintligt för globala manipulationer, till exempel för att implementera dra och släpp (drag-and-drop). Som resultat returnerar metoden ett objekt som innehåller egenskaperna top och left. Fel i beräkningar kan uppstå om användaren ändrar sidans storlek. Metoden får heller inte koordinater för dolda element.

Syntax

Få aktuella koordinater. I vissa fall kan de erhållna värdena vara bråktal:

javascript$(selector).offset();

För att ändra elementets koordinater måste du skicka ett objekt som innehåller egenskaperna top och left:

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

Vi kan också applicera en given funktion på varje element i uppsättningen. Då får funktionen det första parameterelementets nummer i uppsättningen, och den andra parametern - ett objekt med koordinater top och left. this inuti funktionen kommer att peka på det aktuella elementet. Elementets koordinatvärden ändras till de som funktionen returnerar:

javascript$(selector).width(function(index in set, {current coordinates}));

Exempel

Låt oss få positionen för div:en (den gröna kvadraten), med hjälp av metoden offset, och sedan, genom att hänvisa till nycklarna i det erhållna objektet, skriva ut denna information:

html<div id="result">click a square ...</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);
});

Exempel

Låt oss ändra koordinaterna för det andra stycket:

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

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

Se även