Позиция элемента

Материал из JQuery

Перейти к: навигация, поиск
.offset()  .position()

С помощью этих функций, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента. Имеется несколько вариантов использования функций:

.offset() .position():integer1.2
обе функции возвращают координаты выбранного элемента (JS объект с полями top и left). Если выбрано несколько элементов, то значение будет взято у первого. Метод offset возвращает координаты относительно начала страницы, а position относительно ближайшего родителя, у которого задан тип позиционирования (css-свойство position равно relative или absolute или fixed).

File:Position.png


.offset(value):jQuery1.4
изменяет координаты всех выбранных элементов делая их равными value. Значение value должен быть объектом с двумя полями — {top:newTop, left:newLeft}.
.offset(function(index, value)):jQuery1.4
устанавливает новое значение координат элементов, которое возвращает пользовательская функция. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущие координаты элемента.

Примеры использования:

$("div.content").offset() возвратит координаты первого div-элемента с классом content, относительно начала страницы.
$("div.content").position() возвратит координаты первого div-элемента с классом content, относительно ближайшего родителя с заданным позиционированием.
$(".content").offset({top:30, left:100}) устанавливает координаты относительно начала страницы, равные (100, 30) для всех элементов с классом content.

Замечание 1: при изменении координат с помощью функции offset, все выбранные элементы, у которых не задан тип позиционирования (то есть position = static), автоматически изменят позиционирование на относительное (relative).

Замечание 2: важно отметить, что используя метод .offset() вы получите позицию только первого элемента из всех выбранных. Если вам нужны значения координат всех элементов, то следует использовать конструкции типа .map() или .each().

В действии

Первый элемент из списка опустим на 30 пикселей.

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
   ul{
      margin: 10px;
   }
   .item{
      float: left;
      height:20px;
      width:80px;
      margin: 1px;
      padding: 3px;
      background-color: #eee;
      list-style-type:none;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~ul id="list"~gt~
    ~lt~li class="item"~gt~ Выше ~lt~/li ~gt~	
    ~lt~li class="item"~gt~ Быстрее ~lt~/li ~gt~	
    ~lt~li class="item"~gt~ Сильнее ~lt~/li ~gt~	
  ~lt~/ul~gt~
~lt~script~gt~
	$(".item:first").offset(function(i,val){
	  return {top:val.top + 30, left:val.left};
	});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • смещение элемента
  • позиция элементов на странице
  • положение элементов на странице
  • координаты элементов на странице
  • установить координаты элементов
  • изменить координаты элемента
  • присвоить значение координатам элемента
  • .offset()
  • offset()

Поисковые ключи:
  • .position()
  • position()