Question

使用Javascript如何识别给定位置的元素？基本上我正在寻找一个带有两个输入参数（x和y坐标）的函数，并在屏幕上由参数表示的位置返回html元素。

Answer 1

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

Answer 2

您可以使用本机JavaScript elementFromPoint(x, y)方法，该方法返回视口中坐标x，y处的元素。

请参阅elementFromPoint w3c draft

并且，代码示例：

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>

您可以使用setInterval()不断检查元素的悬停事件，但不建议使用.hover(...)和css来提高应用程序性能。

Answer 3

要获取相对于视口的特定位置的最顶层元素，可以使用 document.elementFromPoint(x, y)。

要获取特定位置的所有元素的数组，请使用 document.elementsFromPoint(x, y)。

在这两种情况下，x 是相对于视口左侧的水平坐标，y 是相对于视口顶部的垂直坐标。

获取指定位置的元素 - JavaScript

3 个答案: