offset()

посл. ред. 12.08.2016

Метод offset() изменяет позицию всех элементов выборки относительно документа или возвращает позицию первого элемента.

Позиция элемента представляется в виде координат относительно верхнего левого угла страницы. Отступы (margin) не считаются частью элемента.

Чтобы изменить положение элемента, jQuery автоматически меняет свойство position на relative, если оно равно static.

Варианты использования

jQ_object.offset() => Object: Возвращает объект с двумя свойствами top и left, в которых содержатся координаты первого элемента выборки относительно ближайшего позиционированного предка.
jQ_object.offset(координаты) => jQuery: Изменяет положение каждого элемента выборки в соответствии с указанными координатами. Координаты задаются относительно всего документа в виде объекта со свойствами top и left.
jQ_object.offset(функция) => jQuery: У каждого элемента выборки изменяет координаты на новые, возвращённые указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно. Она должна возвращать объект со свойствами top и left.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся объект с текущими координатами данного элемента. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      padding: 20px 15px;
      background: #789;
    }
    form {
      background: #707;
    }
    textarea {
      margin: 10px;
    }
  </style>
</head>
<body>
  <div>
    <form autocomplete="off">
      <textarea cols="25" rows="3"></textarea>
    </form>
  </div>
</body>
</html>
 
<script>
$('textarea').offset(function(index, coords) {
  coords.left = 0;
  return coords;
});
$('textarea').text(
  'form: top=' + $('form').offset().top + ' left=' + $('form').offset().left +
  '\ntextarea: top=' + $('textarea').offset().top + ' left=' + $('textarea').offset().left
);
</script>