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.

Code kopieren

Der Code lautet wie folgt:

document.getElementById("divFloat").style.top=document.getElementById("Button").offsetLeft+25;

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.

Code kopieren

Der Code lautet wie folgt:

Funktion getOffsetLeft(o)
{
var links=0;
var offsetParent = o;
während (offsetParent != null und offsetParent != Dokument.Body)
{
links += offsetParent.offsetLeft;
offsetParent = offsetParent.offsetParent;
}</p> <p>Zurück nach links;
}

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.

Code kopieren

Der Code lautet wie folgt:

$("#Button").offset().links

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

Code kopieren

Der Code lautet wie folgt:

jQuery.fn.extend({
Position: Funktion() {
wenn ( !diese[0] ) {
gibt null zurück;
}
var elem = diese[0],
// *echten* OffsetParent abrufen
offsetParent = diese.offsetParent(),
// Korrekte Offsets erhalten
Offset = dieser.Offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].nodeName) ? { oben: 0, links: 0 } : offsetParent.offset();
//Elementränder subtrahieren
// Hinweis: Wenn ein Element einen Rand hat: automatisch den OffsetLeft und den RandLeft
// sind in Safari gleich, wodurch offset.left fälschlicherweise 0 ist
offset.top -= parseFloat( jQuery.curCSS(elem, "marginTop", true) ) || 0;
offset.left -= parseFloat( jQuery.curCSS(elem, "marginLeft", true) ) || 0;
// OffsetParent-Grenzen hinzufügen
parentOffset.top += parseFloat( jQuery.curCSS(offsetParent[0], "borderTopWidth", true) ) || 0;
parentOffset.left += parseFloat( jQuery.curCSS(offsetParent[0], "borderLeftWidth", true) ) || 0;
// Subtrahieren Sie die beiden Offsets
zurückkehren {
oben: offset.top - parentOffset.top,
links: offset.left - übergeordneterOffset.left
};
},
offsetParent: Funktion() {
gib dies zurück.map(function() {
var offsetParent = this.offsetParent || Dokument.body;
während (offsetParent und (!/^body|html$/i.test(offsetParent.nodeName) und jQuery.css(offsetParent, "position") === "static")) {
offsetParent = offsetParent.offsetParent;
}
gibt offsetParent zurück;
});
}
});

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

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

<<: Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur

>>: Einfaches Docker Swarm-Tutorial

Detaillierte Schritte zur Yum-Konfiguration des Nginx-Reverse-Proxys

So erhalten/berechnen Sie den Offset eines Seitenelements mit JavaScript

Detaillierte Schritte zur Yum-Konfiguration des Nginx-Reverse-Proxys

So vermeiden Sie Datenschleifenkonflikte, wenn MySQL mit Dual-Master konfiguriert ist

Zeigen Sie die Anzahl der Dateien in jedem Unterordner eines angegebenen Ordners in Linux an

So erstellen Sie ein Projekt mit dem WeChat Mini-Programm unter Verwendung von Typescript

So greifen Sie über die IP-Adresse auf MySql zu

Implementierung der Docker-Bereitstellung des Nuxt.js-Projekts

js regulärer Ausdruck Lookahead und Lookbehind und nicht erfassende Gruppierung

Detaillierte Erklärung zum Ändern des Stils von el-select: popper-append-to-body und popper-class

Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe

Node.js implementiert die Wiederaufnahme von Haltepunkten

Artikel empfehlen

mysql-5.7.21-winx64 kostenlose Installationsversion Installation - Windows-Tutorial detaillierte Erklärung

So löschen Sie eine Eigenschaft eines Objekts in JavaScript

Nodejs implementiert Intranet-Penetrationsdienst

Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf

Implementierung eines einfachen Altersrechners auf Basis von HTML+JS

Tutorial zur Installation der PyTorch-Entwicklungsumgebung unter Windows

Detaillierte Erklärung zur Verwendung des Feldsatzes und der Legende für seltene Tags

Detaillierte Erklärung der Stammverzeichniseinstellungen in nginx.conf

So schreiben Sie DROP TABLE in verschiedene Datenbanken

VUE Erste Schritte Erlernen der Ereignisbehandlung

Einführung in den Löschvorgang von B-Tree

Grafisches Tutorial zur Installation und Aktivierung von VMware Workstation 14 Pro

12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert

Zusammenfassung der verschiedenen Haltungen der MySQL-Berechtigungseskalation

Lösung für das Problem, dass Docker CMD/ENTRYPOINT das sh-Skript ausführt: nicht gefunden/run.sh: