Получить и установить позицию с помощью jQuery .offset ()


106

Как получить и установить позицию элемента с помощью .offsetметода jQuery ?

Скажем, у меня есть div layer1и еще один layer2. Как я могу получить положение layer1и установить такое же положение layer2?


6
Дениз, вы хоть раз проверяли метод .offset () на сайте jQuery? Кроме того, почему вы не принимаете ответ Стива ниже ?!
Rafid

1
@Rafid она практически никогда не возвращалась
jcollum

6
Могу я получить ее баллы?
ganders 09

Ответы:


191
//Get
var p = $("#elementId");
var offset = p.offset();

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});

7
Вы можете просто передать весь offsetобъект, и тогда он //setбудет $("#secondElementId").offset(offset)
выглядеть так

Привет! как я могу установить нижнюю и правую часть div? в смещении нет нижнего, правого свойства
Gourav

34

Рекомендую другой вариант. В пользовательском интерфейсе jQuery появилась новая функция позиционирования, которая позволяет позиционировать элементы относительно друг друга. Полную документацию и демонстрацию см. По адресу : http://jqueryui.com/demos/position/#option-offset .

Вот один из способов позиционирования ваших элементов с помощью функции позиционирования:

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);

13
Этот ответ был отклонен дважды без объяснения причин. Скажите, пожалуйста, почему, если вы проголосуете против моего ответа. Спасибо!
KSev

2
Возможно, это потому, что вы используете пользовательский интерфейс jQuery, а OP запрашивает только jQuery.
коляска

7
часто люди заходят слишком далеко с голосованием против. Не будем предполагать, что более широкий ответ бесполезен для других, даже если это может быть расширение OP. Не заставляйте меня начинать с «закрыто, так как это неправильный вопрос»;)
приземлился

@KSev - Я из будущего. jQuery все еще не имеет сеттера на .position... См .: api.jquery.com/position
Koshinae

@Koshinae Это часть jQuery "UI". См. Ссылку выше или попробуйте jqueryui.com/position . Кроме того, если вы используете jQuery, вы можете рассмотреть возможность использования angularJS 2.0. Однако я ожидаю, что вы поддерживаете устаревший код.
KSev

16

Это выполнимо, но вы должны знать, что using offset()устанавливает положение элемента относительно документа:

$('.layer1').offset( $('.layer2').offset() );

0

Вот вариант. Это только для координат x.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});

offset (). left и css.left - это не одно и то же, они могут иметь или не иметь одинаковые значения в зависимости от структуры страницы.
Kalle

Я поставил +1. Мне кажется, он отлично работает, и по сути он такой же, как и невыбранный ответ ниже, набравший более 85 голосов.
Пол Нельсон Бейкер

Работал у меня. Спасибо за вклад!
Эрленд К. Х.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.