Dapatkan elemen pada posisi yang ditentukan - JavaScript

133

Menggunakan Javascript bagaimana saya bisa mengidentifikasi elemen pada posisi tertentu? Pada dasarnya saya ingin menulis fungsi yang mengambil dua parameter input (koordinat x dan y) dan mengembalikan elemen html pada posisi di layar yang diwakili oleh parameter.

javascript html dom kjv
sumber
3
elementsFromPoint
Janus Troelsen

Jawaban:

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
sumber
22
Kalau saja ada document.elementsFromPointjuga - jika elemen tumpang tindih.
Seiyria
2
Saya kagum ini bekerja di yaitu 5,5 dan tidak banyak digunakan hari ini.
Vlad Nicula
Saya telah mencoba metode ini dan mengukur posisi sesuai dengan dokumen. Bagaimana cara menggunakannya relatif terhadap elemen induk?
Charas
Jika pada koordinat x, y, ada bingkai atau iframe Anda akan mendapatkan bingkai, bukan elemen di lokasi itu.
Elmue
13
document.elementsFromPointtersedia di browser yang diaktifkan Webkit dan Gecko baru-baru ini, meskipun eksperimental. Lihat MDN .
zopieux
27

Anda dapat menggunakan elementFromPoint(x, y)metode JavaScript asli , yang mengembalikan elemen pada koordinat x, y di viewport.

Lihat elementFromPoint w3c

Dan, contoh kode:

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>
Luaskan cuplikan

Anda dapat menggunakan setInterval()untuk terus-menerus memeriksa acara elemen yang melayang tetapi tidak disarankan, coba gunakan .hover(...)dan css sebagai gantinya untuk meningkatkan kinerja aplikasi.

Andrés Morales
sumber