2010-06-15 2 views
68

Это, наверное, очень простой вопрос, но как мне получить правильное смещение элемента в jQuery?Как получить правильное смещение элемента? - jQuery

я могу сделать:

$("#whatever").offset().left; 

и действует.

Но, похоже, что:

$("#whatever").offset().right 

не определен.

Итак, как это выполнить в jQuery?

Спасибо!

ответ

127

Алекс, Гари:

В соответствии с просьбой, вот мой коментарий в ответ:

var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth())); 

Спасибо за давая мне знать.

+0

это не работает с CSS-преобразованиями, смещение будет зависеть от преобразования, но outerWidth (и width) не будет. –

+2

Это смещение с правой стороны окна. Для смещения с левой стороны окна см. [Ответ] cdZ (http://stackoverflow.com/a/5643921/675721). –

+0

правый край элемента можно найти более «изначально» '$ независимо [0] .getBoundingClientRect(). Right'. это относительно левого края окна. – pstanton

27
var $whatever  = $('#whatever'); 
var ending_right  = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth())); 

Ссылка: .outerWidth()

+1

я думаю, что нужно добавить, а затем минус 1. Если ширина 2, то осталось в 10 , а справа - не 12, а 11. –

+30

Это неправильный ответ. В CSS «left» подразумевает «смещение самой левой точки элемента слева от окна/родителя», а «справа» означает «смещение самой правой точки элемента справа от окна/родителя ». Таким образом, правильный ответ будет следующим: 'var rt = ($ (window) .width() - ($ whatever.offset(). Left + $ whatever.outerWidth()));' –

+0

Как люди не заметили, что это неверный ответ: 0 –

14

Может быть, я недоразумение ваш вопрос, но смещение должно дать вам две переменные: горизонтальная и вертикальная. Это определяет положение элемента. Так что вы ищете это:

$("#whatever").offset().left 

и

$("#whatever").offset().top 

Если вам нужно знать, где правая граница вашего элемента, то вы должны использовать:

$("#whatever").offset().left + $("#whatever").outerWidth() 
+0

Это трюк, чтобы получить право на элемент. Спасибо, Грег! – n2lose

7

Просто добавление к тому, что сказал Грег:

$ ("# whatever"). Offset(). Left + $ ("# независимо от того, что "). externalWidth()

Этот код получит правильное положение относительно левой стороны. Если целью было получить правую боковую позицию относительно права (например, при использовании свойства CSS right), то добавление к коду необходимо следующим образом:.

$ («# parent_container») innerWidth () -. ($ ("# независимо от") смещение() левый + $ ("# независимо от") outerWidth())

Этот код полезен в анимации, где вы должны установить на правую сторону, как.. фиксированный якорь, когда вы не можете изначально установить свойство right в CSS.

3

У Брендона Кроуфорда был лучший ответ здесь (в комментарии), поэтому я переведу его до ответа, пока он не сделает (и, может быть, немного расширится).

var offset = $('#whatever').offset(); 

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true)); 
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true)); 
3

Фактически они работают только тогда, когда окно не прокручивается вообще из верхнего левого положения.
Вы должны вычесть значение окна прокрутки, чтобы получить смещение, которое полезно для репозиции элементов, так что они остаются на странице:

var offset = $('#whatever').offset(); 

offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true)); 
offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true)); 
1

Получение точки привязки в div/table (left) = $("#whatever").offset().left; - ок!

Получить опорную точку div/table (right) вы можете использовать нижеприведенный код.

$("#whatever").width(); 
2

Там в родной DOM API, который достигает этого из коробки - getBoundingClientRect:

document.querySelector("#whatever").getBoundingClientRect().right 
+1

Но getBoundingClientRect возвращает относительно области просмотра не по отношению к документу, что и предоставляет функция offset(). –

Смежные вопросы