Metoda offset

Metoda offset umožňuje získat pozici elementu vzhledem k dokumentu, na rozdíl od metody position, která získává souřadnice vzhledem k okrajům rodiče. Metoda offset je více užitečná při pozicování nového elementu přes existující pro globální manipulace, například pro implementaci přetahování (drag-and-drop). Výsledkem metody je objekt obsahující vlastnosti top a left. Chyby ve výpočtech mohou nastat, pokud uživatel mění velikost stránky. Také metoda nezískává souřadnice skrytých elementů.

Syntaxe

Získat aktuální souřadnice. V některých případech získané hodnoty mohou být desetinná čísla:

javascript$(selektor).offset();

Pro změnu souřadnic elementu je třeba předat objekt obsahující vlastnosti top a left:

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

Také můžeme aplikovat zadanou funkci na každý element v sadě. Přitom první parametr funkce obdrží číslo elementu v sadě, a druhý parametr - objekt se souřadnicemi top a left. this uvnitř funkce bude ukazovat na aktuální element. Hodnoty souřadnic elementu se změní na ty, které vrátí funkce:

javascript$(selektor).width(function(číslo v sadě, {aktuální souřadnice}));

Příklad

Získejme pozici divu (zeleného čtverce), pomocí metody offset, a poté, přistoupíme-li ke klíčům získaného objektu, vypišme tuto informaci:

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

Příklad

Změňme souřadnice druhého odstavce:

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

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

Viz také