Dokument: `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 July 2015.
Die elementFromPoint()-Methode, verfügbar auf dem Document-Objekt, gibt das oberste Element 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 denen pointer-events auf none 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 Ergebnis null.
Wenn Sie die spezifische Position innerhalb des Elements finden müssen, verwenden Sie Document.caretPositionFromPoint().
Syntax
elementFromPoint(x, y)
Parameter
Rückgabewert
Das oberste Element-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 id="para1">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());
});
});
Die changeColor()-Methode ermittelt das Element an der angegebenen Stelle und setzt dann die aktuelle Vordergrund-color-Eigenschaft dieses Elements auf die durch den newColor-Parameter angegebene Farbe.
Ergebnis
Spezifikationen
| Specification |
|---|
| CSSOM View Module # dom-document-elementfrompoint |