Detaillierte Erklärung der Methode getBoundingClientRect() in js

1. getBoundingClientRect() Analyse

Die Methode getBoundingClientRect() gibt die Größe eines Elements und seine Position relativ zum Ansichtsfenster zurück.

Grammatik

rectObject = Objekt.getBoundingClientRect();

Wert

rectObject.top: der Abstand von der Oberseite des Elements zur Oberseite des Fensters;
rectObject.right: der Abstand von der rechten Seite des Elements zur linken Seite des Fensters;
rectObject.bottom: der Abstand von der Unterseite des Elements zur Oberseite des Fensters;
rectObject.left: der Abstand von der linken Seite des Elements zur linken Seite des Fensters;
rectObject.width: ist die Breite des Elements selbst rectObject.height ist die Höhe des Elements selbst

Browserübergreifende Kompatibilität

Wenn Sie eine bessere Browser-Kompatibilität benötigen, verwenden Sie window.pageXOffset und window.pageYOffset anstelle von window.scrollX und window.scrollY. Skripte, die keinen Zugriff auf diese Eigenschaften haben, können den folgenden Code verwenden:

// Für scrollX
(((t = Dokument.Dokumentelement) || (t = Dokument.Body.Übergeordneter Knoten))
  && Typ von t.scrollLeft == 'Zahl' ? t : Dokument.Body).scrollLeft
// Für scrollY
(((t = Dokument.Dokumentelement) || (t = Dokument.Body.Übergeordneter Knoten))
  && Typ von t.scrollTop == 'Zahl' ? t : Dokument.Body).scrollTop

Beispiel

// rect ist ein DOMRect-Objekt mit vier Eigenschaften: left, top, right, bottom. Hinweis: DOMRect ist der Standardname für TextRectangle oder ClientRect, sie sind identisch.
var rect = obj.getBoundingClientRect();

Dies ist das Ende dieses Artikels über den detaillierten Fall der Methode getBoundingClientRect() in js. Weitere relevante Inhalte zu getBoundingClientRect() in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!