Nhận phần tử ở vị trí đã chỉ định - JavaScript

133

Sử dụng Javascript làm thế nào tôi có thể xác định thành phần tại một vị trí nhất định? Về cơ bản, tôi đang tìm cách viết một hàm có hai tham số đầu vào (tọa độ x và y) và trả về phần tử html tại vị trí trên màn hình được biểu thị bằng các tham số.

javascript html dom

— kjv
nguồn

các yếu

— tốFromPoint

Câu trả lời:

241

document.elementFromPoint(x, y);

http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint

http://msdn.microsoft.com/en-us/l Library / ms536417% 28VS85% 29.aspx

https://developer.mozilla.org/en/DOM/document.elementFromPoint

— rahul
nguồn

Nếu chỉ có document.elementsFromPointnhư vậy - trong trường hợp các yếu tố là chồng chéo.

— Seiyria

Tôi ngạc nhiên khi nó hoạt động trong tức là 5.5 và ngày nay không được sử dụng nhiều.

— Vlad Nicula

Tôi đã thử phương pháp này và nó đo vị trí theo tài liệu. Làm thế nào để tôi sử dụng nó liên quan đến yếu tố cha mẹ?

— Charas

Nếu tại tọa độ x, y, có một khung hoặc iframe bạn sẽ nhận được khung, thay vì phần tử tại vị trí đó.

— Elmue

document.elementsFromPointcó sẵn trong các trình duyệt hỗ trợ Webkit và Gecko gần đây, mặc dù đã thử nghiệm. Xem MDN .

— zopieux

Bạn có thể sử dụng elementFromPoint(x, y)phương thức JavaScript gốc , trả về phần tử ở tọa độ x, y trong chế độ xem.

Xem dự thảo phần tửFromPoint w3c

Và, một mẫu mã:

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>

Mở rộng đoạn trích

Bạn có thể sử dụng setInterval()để liên tục kiểm tra sự kiện di chuột của phần tử nhưng điều đó không được khuyến khích, .hover(...)thay vào đó hãy thử sử dụng và css để nâng cao hiệu suất của ứng dụng.

— Andrés Morales
nguồn