Document: elementFromPoint() Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die elementFromPoint()-Methode, verfügbar auf dem Document-Objekt, gibt das oberste Element an den angegebenen Koordinaten (relativ zum Ansichtsfenster) zurück.
Wenn das Element an dem angegebenen Punkt 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 am gegebenen Punkt anonym ist oder XBL-generierte Inhalte enthält, wie zum Beispiel die Bildlaufleisten eines Textfeldes, wird das erste nicht-anonyme Vorfahrenelement (zum Beispiel das Textfeld) zurückgegeben.
Elemente mit pointer-events auf none werden ignoriert, und das darunterliegende Element wird zurückgegeben.
Wenn die Methode auf einem anderen Dokument ausgeführt wird (wie in einem <iframe>-Unterdokument), sind die Koordinaten relativ zu dem Dokument, in dem die Methode aufgerufen wird.
Wenn der angegebene Punkt außerhalb der sichtbaren Grenzen des Dokuments liegt oder eine der Koordinaten negativ ist, ist das Ergebnis null.
Wenn Sie die spezifische Position innerhalb des Elements finden müssen, verwenden Sie Document.caretPositionFromPoint().
Syntax
elementFromPoint(x, y)
Parameter
x-
Die horizontale Koordinate eines Punkts, relativ zum linken Rand des aktuellen Ansichtsfensters.
y-
Die vertikale Koordinate eines Punkts, relativ zum oberen Rand des aktuellen Ansichtsfensters.
Rückgabewert
Das oberste Element-Objekt, das an den angegebenen Koordinaten gefunden wird.
Beispiele
Dieses Beispiel erstellt zwei Schaltflächen, die es Ihnen ermöglichen, die aktuelle Farbe des Absatz-Elements zu setzen, das sich an den Koordinaten (2, 2) befindet.
JavaScript
function changeColor(newColor) {
elem = document.elementFromPoint(2, 2);
elem.style.color = newColor;
}
Die changeColor()-Methode ermittelt das Element an dem angegebenen Punkt und setzt dann die aktuelle Vordergrundfarbe des Elements auf die durch den newColor-Parameter angegebene Farbe.
HTML
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>
Das HTML enthält den Absatz, dessen Farbe geändert wird, sowie zwei Schaltflächen: eine, um die Farbe auf Blau zu ändern, und eine andere, um die Farbe auf Rot zu ändern.
Ergebnis
Spezifikationen
| Specification |
|---|
| CSSOM View Module # dom-document-elementfrompoint |
Browser-Kompatibilität
BCD tables only load in the browser