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

106

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

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

jquery Дениз
источник

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);

KSev
источник

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});

Hillspro
источник

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

Kalle

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

Пол Нельсон Бейкер

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

Эрленд К. Х.

0

var redBox = $(".post");

var greenBox = $(".post1");

var offset = redBox.offset();

$(".post1").css({'left': +offset.left});
$(".post1").html("Left :" +offset.left);

http://jsfiddle.net/va836/159/

Чираг Сутхар
источник

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

Ответы: