Ermitteln der Position eines Elements mit JavaScript

1. Verwenden Sie die Funktion Element.getBoundingClientRect(), um die Position eines Elements in JavaScript zu ermitteln
2. Verwenden Sie die Eigenschaft offsetTop, um die Position eines Elements in JavaScript zu ermitteln

Jedes Element im HTML-Dokument wird an einer bestimmten Position platziert. Die Position bezieht sich hier auf die x- und y-Koordinaten von Elementen.

In diesem Tutorial erhalten wir die Position eines HTML-Elements in JavaScript.

Verwenden Sie die Funktion Element.getBoundingClientRect(), um die Position eines Elements in JavaScript zu ermitteln

Die Funktion getBoundingClientRect() erzeugt ein DOMRect-Objekt, das Informationen über die Größe und Position eines Elements im Viewport enthält.

Das DOMRect-Objekt enthält, wenn es zurückgegeben wird, ein kleines Rechteck, das das gesamte Element enthält, einschließlich der Auffüllung und der Rahmenbreite.

Die Attribute wie left, top, right, bottom, x, y, width und height werden verwendet, um die Gesamtposition des Rechtecks ​​zu definieren, auch die Größe in Pixeln. Die erhaltenen Werte beziehen sich auf die obere linke Ecke des Ansichtsfensters, mit Ausnahme von Breite und Höhe.

Zum Beispiel,

let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
console.log('x: ' + rect.x);
console.log('y: ' + rect.y);

Verwenden Sie die Eigenschaft offsetTop, um die Position eines Elements in JavaScript zu ermitteln

Es gibt die obere Position relativ zum oberen Rand des offsetParent-Elements zurück. Wir können eine Funktion erstellen, die diese Koordinaten zurückgibt.

Zum Beispiel,

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {top: _y, left: _x};
}
var x = getOffset(document.getElementById('div')).left;
var y = getOffset(document.getElementById('div')).top;
console.log('x: ' + x);
console.log('y: ' + y);