Вычисление положения элементов

Для вычисления положения элемента предназначены методы offset() и position(). Они возвращают значение для первого элемента коллекции. Метод offset() возвращает позицию относительно документа (элемент включает рамку, но не включает внешний отступ). Метод position() возвращает позицию относительно родительского элемента, для которого CSS-атрибут position имеет значение relative, absolute или fixed.

Методы возвращают объект с двумя свойствами:

  • top — смещение сверху;
  • left — смещение слева.

Выведем положение элемента при щелчке на нем (листинг 1.9).

Листинг 1.9. Методы offset() и position()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Методы offset() и position()</title>
   <style>
   div {
      margin: 20px; padding: 15px;
      border: black 2px dotted;
      position: relative;
   }
   </style>
</head>
<body>
   <p>Абзац 1</p>
   <div>
      <p style="margin: 30px;">Абзац 2</p>
   </div>
   Щелкните на абзаце

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('p').one('click', function() {
      var elem = $(this);
      var obj1 = elem.offset();
      var obj2 = elem.position();
      var msg = 'Offset top: ' + obj1.top + ' left: ' + obj1.left;
      msg += ' Position top: ' + obj2.top + ' left: ' + obj2.left;
      elem.html(msg);
   });
});
</script>
</body>
</html>

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

offset(<Объект с координатами>)
offset(<Функция обратного вызова>)

Первый формат принимает объект с двумя свойствами: left и top, имеющими числовые значения. Если для элемента CSS-атрибут position имеет значение static, то значение будет изменено на relative. Пример:

<div id="div1">Текст</div>

$('#div1').offset( { left: 100, top: 50 } );

Результат:

<div id="div1" 
     style="position: relative; top: 50px; left: 100px;">Текст</div>

Второй формат метода offset() позволяет указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Положение>]]) {
   // ...
}

На каждой итерации в функцию передается указатель this на текущий DOM-элемент. Чтобы задать положение, необходимо внутри функции обратного вызова вернуть объект с двумя свойствами: left и top, имеющими числовые значения. Если в первом параметре указать переменную, то через нее будет доступен индекс текущего элемента в коллекции. Через второй параметр доступен объект с двумя свойствами: left и top, содержащий текущее положение элемента. Если для элемента CSS-атрибут position имеет значение static, то значение будет изменено на relative. Сместим элемент вправо на 100 пикселов, а вниз на 50 пикселов:

<div id="div1">Текст</div>

$('#div1').offset( function(i, pos) {
   return { left: pos.left + 100, top: pos.top + 50 };
});

Результат:

<div id="div1" 
     style="position: relative; top: 50px; left: 100px;">Текст</div>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов