DieelementFromPoint()-Methode, verfügbar auf demDocument-Objekt, gibt das obersteElement an den angegebenen Koordinaten (relativ zum Viewport) zurück.

Wenn das Element an der angegebenen Stelle zu einem anderen Dokument gehört (zum Beispiel das Dokument eines<iframe>), wird das übergeordnete Element dieses Dokuments zurückgegeben (das<iframe> selbst). Wenn das Element an der angegebenen Stelle anonym oder von XBL generierter Inhalt ist, wie beispielsweise die Scrollleisten eines Textfelds, wird das erste nicht-anonyme Vorfahrenelement (zum Beispiel das Textfeld) zurückgegeben.

Elemente, bei denenpointer-events aufnone gesetzt ist, werden ignoriert, und das darunter liegende Element wird zurückgegeben.

Wird die Methode auf einem anderen Dokument (wie einem<iframe>-Unterdokument) ausgeführt, sind die Koordinaten relativ zu dem Dokument, auf dem die Methode aufgerufen wird.

Liegt der angegebene Punkt außerhalb der sichtbaren Grenzen des Dokuments oder ist eine der Koordinaten negativ, ist das Ergebnisnull.

Wenn Sie die spezifische Position innerhalb des Elements finden müssen, verwenden SieDocument.caretPositionFromPoint().

Syntax

elementFromPoint(x, y)

Parameter

x

Die horizontale Koordinate eines Punktes relativ zum linken Rand des aktuellenViewports.

y

Die vertikale Koordinate eines Punktes relativ zum oberen Rand des aktuellen Viewports.

Rückgabewert

Das obersteElement-Objekt, das sich an den angegebenen Koordinaten befindet.

Beispiele

Dieses Beispiel erstellt zwei Buttons, die Ihnen ermöglichen, die aktuelle Farbe des Absatz-Elements zu ändern, das sich unter den Koordinaten(2, 2) befindet.

HTML

<p>Some text here</p><button>Blue</button><button>Red</button>

Das HTML stellt den Absatz bereit, dessen Farbe verändert wird, sowie zwei Buttons: einer, um die Farbe auf Blau zu ändern, und ein anderer, um die Farbe auf Rot zu ändern.

JavaScript

function changeColor(newColor) {  const elem = document.elementFromPoint(2, 2);  elem.style.color = newColor;}document.querySelectorAll("button").forEach((button) => {  button.addEventListener("click", (event) => {    changeColor(event.target.textContent.toLowerCase());  });});

DiechangeColor()-Methode ermittelt das Element an der angegebenen Stelle und setzt dann die aktuelle Vordergrund-color-Eigenschaft dieses Elements auf die durch dennewColor-Parameter angegebene Farbe.

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Document.elementsFromPoint()