Ich bin es gewohnt, mit jQuery zu arbeiten. In meinem aktuellen Projekt verwende ich jedoch zepto.js. Zepto bietet keine position()
Methode wie jQuery. Zepto kommt nur mit offset()
.
Haben Sie eine Idee, wie ich den Offset eines Containers relativ zu einem übergeordneten Element mit reinem js oder mit Zepto abrufen kann?
JavaScript
Tag, wenn Sie reines JavaScript verwenden. Wenn Sie einen Rahmen oder Bibliothek verwenden dann tun Sie nicht verwenden , um denJavaScript
Tag. Wenn Sie Jeff heißen, würde ich Sie nicht Sally nennen.Antworten:
Warnung: jQuery, kein Standard-JavaScript
element.offsetLeft
undelement.offsetTop
sind die reinen Javascript-Eigenschaften zum Finden der Position eines Elements in Bezug auf seineoffsetParent
; das nächste übergeordnete Element mit einer Position vonrelative
oder seinabsolute
Alternativ können Sie jederzeit Zepto verwenden , um die Position eines Elements UND seines übergeordneten Elements abzurufen und einfach die beiden zu subtrahieren:
Dies hat den Vorteil, dass Sie den Versatz eines Kindes relativ zu seinem Elternteil erhalten, auch wenn das Elternteil nicht positioniert ist.
quelle
static
sind keine versetzten Eltern.in reinen js nur verwenden
offsetLeft
und eigenschaftenoffsetTop
.Beispiel Geige: http://jsfiddle.net/WKZ8P/
quelle
p.offsetTop + p.parentNode.offsetTop
Sie könnten dies in einen rekursiven Funktionsaufruf einschließen, ähnlich wie PPK vor einigen Jahren vorgeschlagen hat. Sie können die Funktion ändern, um entweder die Anzahl der zu übersteigenden Ebenen zu übergeben oder einen Selektor zum Nachahmen zu verwenden$(selector).parents(parentSelector)
. Ich würde diese Lösung bevorzugen, da die Zepto-Implementierung nur auf unterstützenden Browsern funktioniertgetBoundingClientsRect
- was einige Handys nicht tun.getBoundingClientsRect
wurde weithin unterstützt ... wenn jemand weiß, welche Handys es nicht unterstützen, wäre ich interessiert (ich kann keine Support-Tabelle für Handys darüber finden).$(this).offset().left
zuthis.offsetLeft
.jQuery.position()
Verhalten innerhalb eines 3D-transformierten Elternteils. Vielen Dank!Ich habe es so im Internet Explorer gemacht.
=================== Sie können es so nennen
Ich konzentriere mich nur gemäß meinem Fokus auf den IE, aber ähnliche Dinge können für andere Browser getan werden.
quelle
Fügen Sie den Versatz des Ereignisses zum Versatz des übergeordneten Elements hinzu, um die absolute Versatzposition des Ereignisses zu erhalten.
Ein Beispiel :
Wenn das Ereignisziel nicht das Element ist, für das das Ereignis registriert wurde, addiert es den Versatz des übergeordneten Elements zum aktuellen Ereignisversatz, um den Versatzwert "Absolut" zu berechnen.
Laut Mozilla Web API: "Die schreibgeschützte Eigenschaft HTMLElement.offsetLeft gibt die Anzahl der Pixel zurück, um die die obere linke Ecke des aktuellen Elements im Knoten HTMLElement.offsetParent nach links versetzt ist . "
Dies geschieht meistens, wenn Sie ein Ereignis bei einem Elternteil registriert haben, das mehrere untergeordnete
li
Elemente enthält, z. B. eine Schaltfläche mit einem inneren Symbol oder einer Textspanne, ein Element mit inneren Bereichen. etc...quelle
Beispiel
Wenn wir also ein untergeordnetes Element mit der ID "untergeordnetes Element" hätten und die Position links / oben relativ zu einem übergeordneten Element ermitteln möchten, sagen wir, ein Div mit der Klasse "Element-übergeordnetes Element" würden wir Verwenden Sie diesen Code.
Plugin Zum Schluss für das eigentliche Plugin (mit ein paar Anmerkungen, die erklären, was los ist):
quelle
Ich habe eine andere Lösung. Subtrahieren Sie den Wert der übergeordneten Eigenschaft vom Wert der untergeordneten Eigenschaft
quelle
Sicher ist es einfach mit reinem JS, mach das einfach, arbeite auch für feste und animierte HTML 5-Panels. Ich habe diesen Code erstellt und ausprobiert und er funktioniert für jeden Browser (einschließlich IE 8):
quelle