文档：elementFromPoint() 方法
Document 对象上的 elementFromPoint() 方法会返回指定坐标（相对于视口）处最顶层的 Element。
如果指定点处的元素属于另一个文档（例如，<iframe> 的文档），则会返回该文档的父元素（即 <iframe> 本身）。如果给定点处的元素是匿名的或 XBL 生成的内容，例如文本框的滚动条，则会返回第一个非匿名的祖先元素（例如，文本框）。
pointer-events 设置为 none 的元素将被忽略，并返回其下方的元素。
如果方法是在另一个文档（如 <iframe> 的子文档）上运行的，则坐标相对于正在调用该方法的文档。
如果指定的点超出文档的可见边界，或者任一坐标为负数，则结果为 null。
如果您需要查找元素内的特定位置，请使用 Document.caretPositionFromPoint()。
语法
js
elementFromPoint(x, y)
参数
返回值
位于指定坐标的最顶层的 Element 对象。
示例
此示例创建了两个按钮，可让您更改位于坐标 (2, 2) 下方的段落元素的当前颜色。
HTML
html
<p id="para1">Some text here</p>
<button>Blue</button>
<button>Red</button>
HTML 提供了将受影响的段落，以及两个按钮：一个将颜色更改为蓝色，另一个将颜色更改为红色。
JavaScript
js
function changeColor(newColor) {
const elem = document.elementFromPoint(2, 2);
elem.style.color = newColor;
}
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (event) => {
changeColor(event.target.textContent.toLowerCase());
});
});
changeColor() 方法获取位于指定点的元素，然后将其当前的前景色 color 属性设置为 newColor 参数指定的颜色。
结果
规范
| 规范 |
|---|
| CSSOM 视图模块 # dom-document-elementfrompoint |
浏览器兼容性
加载中…