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

Question 1

Вероятно, это действительно простой вопрос, но как мне получить правильное смещение элемента в jQuery?

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

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

и это действительно так.

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

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

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

Итак, как этого добиться в jQuery?

Благодарность!!

Question 2

Алекс, Гэри:

По запросу, вот мой комментарий, опубликованный в качестве ответа:

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

Спасибо, что дали мне знать.

В псевдокоде это можно выразить как:

Правильное смещение:

Ширина окна МИНУС
( Смещение элемента влево ПЛЮС внешняя ширина элемента )

Question 3

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

Ссылка: .outerWidth ()

Question 4

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

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

а также

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

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

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

Question 5

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

$ ("# что угодно"). offset (). left + $ ("# что угодно"). outerWidth ()

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

$ ("# parent_container"). innerWidth () - ($ ("# что угодно"). offset (). left + $ ("# что угодно"). outerWidth ())

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

Question 6

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

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

Question 7

Есть собственный DOM API, который делает это из коробки getBoundingClientRect:

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

Question 8

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

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

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

Question 9

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

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

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

Answer 1

Вероятно, это действительно простой вопрос, но как мне получить правильное смещение элемента в jQuery?

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

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

и это действительно так.

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

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

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

Итак, как этого добиться в jQuery?

Благодарность!!

Answer 2

161

Алекс, Гэри:

По запросу, вот мой комментарий, опубликованный в качестве ответа:

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

Спасибо, что дали мне знать.

В псевдокоде это можно выразить как:

Правильное смещение:

Ширина окна МИНУС
( Смещение элемента влево ПЛЮС внешняя ширина элемента )

Брендон Кроуфорд
источник

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

Джонатан.

2

Это смещение от правой стороны окна. Для смещения от левой стороны окна см. Ответ cdZ .

Codebling

крайний правый край элемента может быть более "родным" $whatever[0].getBoundingClientRect().right. это относительно левого края окна.

pstanton 03

Спасибо, брендон. Полезный ответ.

Answer 3

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

Джонатан.

Answer 4

2

Это смещение от правой стороны окна. Для смещения от левой стороны окна см. Ответ cdZ .

Codebling

Answer 5

крайний правый край элемента может быть более "родным" $whatever[0].getBoundingClientRect().right. это относительно левого края окна.

pstanton 03

Answer 6

Спасибо, брендон. Полезный ответ.

Answer 7

29

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

Ссылка: .outerWidth ()

Дженди
источник

1

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

неполярность

31

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

Брендон Кроуфорд

5

@BrendonCrawford Вы должны переместить этот комментарий в ответ.

Гэри,

3

Примечание для всех, кто приходит - ответ выше был отредактирован, чтобы правильно отразить комментарий, сделанный Брендоном.

Крис Марасти-Георг

Answer 8

1

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

неполярность

Answer 9

31

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

Брендон Кроуфорд

Answer 10

5

@BrendonCrawford Вы должны переместить этот комментарий в ответ.

Гэри,

Answer 11

3

Примечание для всех, кто приходит - ответ выше был отредактирован, чтобы правильно отразить комментарий, сделанный Брендоном.

Крис Марасти-Георг

Answer 12

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

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

а также

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

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

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

Answer 13

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

$ ("# что угодно"). offset (). left + $ ("# что угодно"). outerWidth ()

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

$ ("# parent_container"). innerWidth () - ($ ("# что угодно"). offset (). left + $ ("# что угодно"). outerWidth ())

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

Answer 14

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

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

Answer 15

5

Есть собственный DOM API, который делает это из коробки getBoundingClientRect:

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

Барни
источник

2

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

Сай Дуббака 05

Answer 16

2

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

Сай Дуббака 05

Answer 17

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

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

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

Answer 18

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

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

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

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

Ответы: