Позиция элемента
.offset() .position()
С помощью этих функций, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента. Имеется несколько вариантов использования функций:
.offset() .position():integer1.2
обе функции возвращают координаты выбранного элемента (JS объект с полями top и left). Если выбрано несколько элементов, то значение будет взято у первого. Метод offset возвращает координаты относительно начала страницы, а position относительно ближайшего родителя, у которого задан тип позиционирования (css-свойство position равно relative или absolute или fixed).
.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="https://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~