Ottieni l'elemento nella posizione specificata - JavaScript

133

Utilizzando Javascript come posso identificare l'elemento in una data posizione? Fondamentalmente sto cercando di scrivere una funzione che accetta due parametri di input (le coordinate xey) e restituisce l'elemento html nella posizione sullo schermo rappresentata dai parametri.

javascript html dom

— kjv
fonte

elementsFromPoint

— Janus Troelsen,

Risposte:

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
fonte

Se solo ci fossero document.elementsFromPointanche - nel caso in cui gli elementi si sovrappongano.

— Seiyria,

Sono sorpreso che questo abbia funzionato in 5,5 e non sia usato così tanto oggi.

— Vlad Nicula,

Ho provato questo metodo e misura la posizione secondo il documento. Come lo uso rispetto all'elemento genitore?

— Charas,

Se alla coordinata x, y, c'è un frame o iframe, otterrai il frame, anziché l'elemento in quella posizione.

— Elmue,

document.elementsFromPointè disponibile nei recenti browser abilitati per Webkit e Gecko, sebbene sperimentale. Vedi MDN .

— zopieux,

È possibile utilizzare il elementFromPoint(x, y)metodo JavaScript nativo , che restituisce l'elemento alle coordinate x, y nella finestra.

Vedi la bozza elementFromPoint w3c

E un esempio di codice:

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>

Espandi frammento

Puoi usare setInterval()per controllare continuamente l'evento hover dell'elemento ma non è raccomandato, prova invece a usare .hover(...)e css per migliorare le prestazioni dell'applicazione.

— Andrés Morales
fonte