Отримайте та встановіть позицію за допомогою jQuery .offset ()


106

Як отримати та встановити положення елемента .offsetметодом jQuery ?

Скажімо, у мене є діва layer1та інша layer2. Як я можу отримати позицію layer1та встановити ту саму позицію layer2?


6
Деніз, ти навіть перевіряв метод .offset () на веб-сайті jQuery? Крім того, чому ви не приймаєте відповідь Стіва нижче ?!
Рафід

1
@Rafid вона в основному ніколи не поверталася
jcollum

6
Чи можу я мати її бали?
ґендер

Відповіді:


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

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

7
Ви можете просто передати весь offsetоб'єкт, так що //setце стане: $("#secondElementId").offset(offset)
mecampbellsoup

ей! як я можу встановити знизу і справа від діва? немає
зрушення

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
часто люди йдуть занадто далеко з голосуванням за прихильність. Не давайте вважати, що більш широка відповідь є марною для інших, навіть якщо це може бути розширення ОП. Не запускайте мене з "закритого типу, оскільки це не належне питання";)
приземлився

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

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

16

Це можливо, але ви повинні знати, що за допомогою offset()встановлення положення елемента щодо документа:

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

0

Ось варіант. Це лише для x координат.

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

offset (). зліва та css.left - це не одне і те ж, вони можуть мати або не мати однакових значень залежно від структури сторінки.
Калле

Я поставив +1. Мені здається, це працює добре для мене, і це по суті те саме, що відповідь, що не відповідає думкам нижче, має 85+ голосів.
Пол Нельсон Бейкер

Працювали для мене. Дякуємо за внесок!
Erlend KH

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.