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
3
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
22
Wenn es nur auch gäbe document.elementsFromPoint- falls sich Elemente überlappen.
Seiyria
2
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
13
document.elementsFromPointist in neueren Webkit- und Gecko-fähigen Browsern verfügbar, wenn auch experimentell. Siehe MDN .
Zopieux
27

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