js获取指定坐标的元素名，网上大都是获取指定元素的坐标。。。

Posted 2023-04-24

<div id="parent">
//以下每个div高度都充满页面
<div>1</div>//childDiv
<div>2</div>//childDiv
<div>3</div>//childDiv
<div>4</div>//childDiv
</div>
以上代码不规范，只为方便说明问题。
需求如下：
让每个子div都充满页面，添加两个按钮（向上、向下）
点击向上或向下按钮，页面滚动到上/下一个子div
需解决的问题：
获取当前屏幕显示的是哪个子div，再根据按钮点击跳转到上/下一个子div。子div数量未定，未加id。
个人思路：
指定特定坐标，获取该坐标下的div
求解答：
如何获取指定坐标的div，不靠鼠标移动到上方，直接指定。
大神们有其他解决方法吗？跪求~悬赏分数倒没了，只有膝盖两个~

参考技术A document.elementFromPoint(x,y)
获取坐标(x,y)的元素。

获取指定位置的元素 - JavaScript

【中文标题】获取指定位置的元素 - JavaScript

【英文标题】：Get element at specified position - JavaScript

【发布时间】：2010-11-18 13:51:31

【问题描述】：

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

【问题讨论】：

elementsFromPoint

【参考方案1】：

document.elementFromPoint(x, y)
document.elementsFromPoint(x, y)

https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint

https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint

【讨论】：

我很惊讶这在 ie 5.5 中可以工作，而且今天用得不多。

我试过这个方法，它根据文件测量位置。如何相对于父元素使用它？

如果在坐标x，y，有frame或者iframe你会得到frame，而不是那个位置的元素。

一个 jsfiddle 的例子真的很棒！看起来很神奇！迫不及待想试试！

【参考方案2】：

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

要获取特定位置的所有元素的数组，请使用document.element<b><i>s</i></b>FromPoint(x, y)。

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

【参考方案3】：

您可以使用原生 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代替以增强应用程序性能。