Método offset

O método offset permite obter a posição do elemento em relação ao documento, ao contrário do método position, que obtém coordenadas em relação às margens do elemento pai. O método offset é mais útil para posicionar um novo elemento sobre um existente para manipulações globais, por exemplo, para implementar drag-and-drop (arrastar e soltar). Como resultado, o método retorna um objeto contendo as propriedades top e left. Erros de cálculo podem ocorrer se o usuário alterar o tamanho da página. O método também não obtém as coordenadas de elementos ocultos.

Sintaxe

Obter as coordenadas atuais. Em alguns casos, os valores obtidos podem ser fracionários:

javascript$(seletor).offset();

Para alterar as coordenadas do elemento, é necessário passar um objeto contendo as propriedades top e left:

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

Também podemos aplicar uma função definida a cada elemento no conjunto. Neste caso, o primeiro parâmetro da função receberá o índice do elemento no conjunto, e o segundo parâmetro - um objeto com as coordenadas top e left. this dentro da função irá apontar para o elemento atual. Os valores das coordenadas do elemento serão alterados para aqueles retornados pela função:

javascript$(seletor).offset(function(índice no conjunto, {coordenadas atuais}));

Exemplo

Vamos obter a posição do div (quadrado verde), usando o método offset, e então, acessando as chaves do objeto obtido, exibir essa informação:

html<div id="result">clique em um quadrado ...</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);
});

Exemplo

Vamos alterar as coordenadas do segundo parágrafo:

html<p style="margin-left: 10px;">texto1</p>
<p style="margin-left: 10px;">texto2</p>

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

Veja também