So erhalten/berechnen Sie den Offset eines Seitenelements mit JavaScript

Frage

Durch Klicken auf ein Steuerelement wird eine schwebende Ebene unter dem Steuerelement angezeigt. Die übliche Vorgehensweise besteht darin, den Versatzwert des Steuerelements abzurufen, die Werte oben, links und anderer CSS-Eigenschaften der schwebenden Ebene zu berechnen und sie zuzuweisen.

Schauen wir uns dann an, wie man den Offsetwert des Steuerelements erhält.

Reine JS-Implementierung

Das erste, was mir in den Sinn kommt, ist ein Stück JS wie dieses.

Wenn Sie feststellen, dass Sie Werteinheiten hinzufügen müssen, ändern Sie es wie folgt:

Ich habe es noch einmal mit IETester und FireFox getestet und es funktioniert einwandfrei in IE6+. Wie zuvor wurde die reine JS-Methode, die ich geschrieben habe, von FireFox gnadenlos verachtet und der erhaltene Wert war falsch.

Ich habe online nachgeschaut und herausgefunden, dass es folgendermaßen geschrieben werden müsste: durch eine Schleife Schicht für Schicht berechnen und schließlich den genauen Offsetwert erhalten.

jQuery-Implementierung

Als ich die damit verbundenen Probleme genauer untersuchte, stellte ich fest, dass jQuery bereits eine Funktion zur Implementierung dieser Funktion enthält: offset(), die mit verschiedenen Browsern sehr kompatibel ist.

Nach dem Herunterladen des Quellcodes stellte ich fest, dass jQuery wie folgt implementiert ist

Die Berechnungsmethode ist ähnlich, allerdings gibt es einen Hinweis:

Die Funktion offset() bezieht Randwerte nicht in ihre Berechnungen ein (Rahmenwerte jedoch schon).