Я привык работать с jQuery. Однако в моем текущем проекте я использую zepto.js. Zepto не предоставляет такой position()
метод, как jQuery. Zepto поставляется только с offset()
.
Любая идея, как я могу получить смещение контейнера относительно родителя с чистым js или с Zepto?
JavaScript
тег, когда используете чистый JavaScript. Если вы используете фреймворк или библиотеку, вы не используетеJavaScript
тег. Если тебя зовут Джефф, я бы не стал называть тебя Салли.Ответы:
Предупреждение: jQuery, а не стандартный JavaScript
element.offsetLeft
иelement.offsetTop
являются чистыми свойствами javascript для поиска позиции элемента по отношению к немуoffsetParent
; ближайший родительский элемент с позициейrelative
илиabsolute
В качестве альтернативы вы всегда можете использовать Zepto, чтобы получить позицию элемента И его родителя, и просто вычесть два:
Это дает вам смещение дочернего элемента относительно его родителя, даже если родительский элемент не расположен.
источник
static
элементы не являются родителями смещения.в чистом js просто используйте
offsetLeft
иoffsetTop
свойства.Пример скрипки: http://jsfiddle.net/WKZ8P/
источник
p.offsetTop + p.parentNode.offsetTop
Вы можете обернуть это рекурсивным вызовом функции, как это было предложено несколько лет назад PPK . Вы можете изменить функцию, чтобы передать количество уровней, на которые нужно подняться, или использовать селектор для имитации$(selector).parents(parentSelector)
. Я бы предпочел это решение, потому что реализация zepto работает только с поддерживающими браузерами,getBoundingClientsRect
чего нет на некоторых мобильных устройствах.getBoundingClientsRect
получил широкую поддержку ... если кто-нибудь знает, какие мобильные телефоны не поддерживают его, мне было бы интересно (не могу найти ни одной таблицы поддержки для мобильных устройств).$(this).offset().left
наthis.offsetLeft
.jQuery.position()
поведение внутри 3D-преобразованного родителя, большое вам спасибо!Я так сделал в Internet Explorer.
=================== вы можете назвать это так
Я сосредотачиваюсь на IE только в соответствии с моей задачей, но аналогичные вещи можно сделать и для других браузеров.
источник
Добавьте смещение события к смещению родительского элемента, чтобы получить абсолютную позицию смещения события.
Пример :
Когда целью события не является элемент, для которого событие было зарегистрировано, он добавляет смещение родительского элемента к текущему смещению события, чтобы вычислить «абсолютное» значение смещения.
Согласно веб-API Mozilla: «Свойство HTMLElement.offsetLeft, доступное только для чтения, возвращает количество пикселей, на которое верхний левый угол текущего элемента смещен влево внутри узла HTMLElement.offsetParent ».
В основном это происходит, когда вы регистрируете событие для родителя, который содержит еще несколько дочерних
li
элементов , например: кнопку с внутренним значком или текстовым диапазоном, элемент с внутренними промежутками. и т.д...источник
пример
Итак, если бы у нас был дочерний элемент с идентификатором «child-element», и мы хотели бы получить его левую / верхнюю позицию относительно родительского элемента, скажем, для div с классом «item-parent», мы бы используйте этот код.
Плагин Наконец, для самого плагина (с несколькими примечаниями, объясняющими, что происходит):
источник
У меня есть другое решение. Вычесть значение родительского свойства из значения дочернего свойства
источник
Конечно, это просто с чистым JS, просто сделайте это, работайте и для фиксированных и анимированных панелей HTML 5, я сделал и попробовал этот код, и он работает для любого браузера (включая IE 8):
источник