Öğeyi belirtilen konumda al - JavaScript

133

Javascript kullanarak belirli bir konumdaki öğeyi nasıl tanımlayabilirim? Temel olarak, iki girdi parametresi (x ve y koordinatları) alan ve html öğesini parametrelerle temsil edilen ekrandaki konuma döndüren bir işlev yazmak istiyorum.

javascript html dom

— kjv
kaynak

elementsFromPoint

— Janus Troelsen

Yanıtlar:

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
kaynak

Keşke de olsaydı document.elementsFromPoint- elemanların örtüşmesi durumunda.

— Seiyria

Bunun yani 5.5'te çalıştığına ve bugün pek kullanılmadığına şaşırdım.

— Vlad Nicula

Bu yöntemi denedim ve belgeye göre konumu ölçüyor. Bunu ana öğeye göre nasıl kullanırım?

— Charas

X, y koordinatında bir çerçeve veya iç çerçeve varsa, o konumdaki öğe yerine çerçeveyi alırsınız.

— Elmue

document.elementsFromPointdeneysel de olsa son Webkit ve Gecko etkin tarayıcılarda mevcuttur. MDN'ye bakın .

— zopieux

elementFromPoint(x, y)Öğeyi görünüm alanında x, y koordinatlarında döndüren yerel JavaScript yöntemini kullanabilirsiniz .

ElementFromPoint w3c taslağına bakın

Ve bir kod örneği:

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>

Snippet'i genişlet

setInterval()Öğenin üzerine gelme olayını sürekli olarak kontrol etmek için kullanabilirsiniz ancak bu önerilmez, .hover(...)bunun yerine uygulama performansını artırmak için ve css kullanmayı deneyin .

— Andrés Morales
kaynak