Holen Sie sich das Element an der angegebenen Position - JavaScript

133

Wie kann ich mit Javascript das Element an einer bestimmten Position identifizieren? Grundsätzlich möchte ich eine Funktion schreiben, die zwei Eingabeparameter (die x- und y-Koordinaten) verwendet und das HTML-Element an der Position auf dem Bildschirm zurückgibt, die durch die Parameter dargestellt wird.

javascript html dom

— kjv
quelle

elementsFromPoint

— Janus Troelsen

Antworten:

241

document.elementFromPoint(x, y);

http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint

http://msdn.microsoft.com/en-us/library/ms536417%28VS.85%29.aspx

https://developer.mozilla.org/en/DOM/document.elementFromPoint

— rahul
quelle

Wenn es nur auch gäbe document.elementsFromPoint- falls sich Elemente überlappen.

— Seiyria

Ich bin erstaunt, dass dies in zB 5.5 funktioniert hat und heute nicht mehr so häufig verwendet wird.

— Vlad Nicula

Ich habe diese Methode ausprobiert und sie misst die Position gemäß dem Dokument. Wie verwende ich es relativ zum übergeordneten Element?

— Charas

Wenn sich an der Koordinate x, y ein Rahmen oder ein Iframe befindet, erhalten Sie den Rahmen und nicht das Element an dieser Stelle.

— Elmue

document.elementsFromPointist in neueren Webkit- und Gecko-fähigen Browsern verfügbar, wenn auch experimentell. Siehe MDN .

— Zopieux

Sie können die native JavaScript- elementFromPoint(x, y)Methode verwenden, die das Element an den Koordinaten x, y im Ansichtsfenster zurückgibt.

Siehe den Entwurf von elementFromPoint w3c

Und ein Codebeispiel:

function changeColor(newColor) {
    // Get the element placed at coords (2, 2)
    var elem = document.elementFromPoint(2, 2);
    // Set the foreground color to the element
    elem.style.color = newColor;
}

<p id="para1">Change this text color using the following buttons.</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>

Erweitern Sie das Snippet

Sie können setInterval()das Hover-Ereignis des Elements kontinuierlich überprüfen, es wird jedoch nicht empfohlen. Versuchen Sie .hover(...)stattdessen, CSS zu verwenden, um die Anwendungsleistung zu verbessern.

— Andrés Morales
quelle