Récupérer l'élément à la position spécifiée - JavaScript

133

En utilisant Javascript, comment identifier l'élément à une position donnée? Fondamentalement, je cherche à écrire une fonction qui prend deux paramètres d'entrée (les coordonnées x et y) et renvoie l'élément html à la position sur l'écran représentée par les paramètres.

javascript html dom kjv
la source
3
elementsFromPoint
Janus Troelsen

Réponses:

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
la source
22
Si seulement il y en avait document.elementsFromPointaussi - au cas où les éléments se chevauchent.
Seiyria
2
Je suis étonné que cela a fonctionné en 5.5 et n'est pas beaucoup utilisé aujourd'hui.
Vlad Nicula
J'ai essayé cette méthode et elle mesure la position en fonction du document. Comment l'utiliser par rapport à l'élément parent?
Charas
Si aux coordonnées x, y, il y a un cadre ou une iframe, vous obtiendrez le cadre, plutôt que l'élément à cet endroit.
Elmue le
13
document.elementsFromPointest disponible dans les navigateurs récents compatibles Webkit et Gecko, bien qu'à titre expérimental. Voir MDN .
zopieux
27

Vous pouvez utiliser la elementFromPoint(x, y)méthode JavaScript native , qui renvoie l'élément aux coordonnées x, y dans la fenêtre.

Voir le brouillon elementFromPoint w3c

Et, un exemple de code:

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>
Développer l'extrait

Vous pouvez utiliser setInterval()pour vérifier en permanence l'événement de survol de l'élément, mais ce n'est pas recommandé, essayez d'utiliser .hover(...)et css à la place pour améliorer les performances de l'application.

Andrés Morales
la source