此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Document:elementFromPoint() 方法
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Document 对象的elementFromPoint() 方法返回给定相对于视口的坐标点下最上层的Element。
如果指定位置的元素属于另一个文档(例如<iframe> 的文档),则会返回该文档的父元素(<iframe> 本身)。如果给定点上的元素是匿名或 XBL 生成的内容(例如文本框的滚动条),则会返回第一个非匿名的祖先元素(例如文本框)。
pointer-events 设置为none 的元素会被忽略,且将返回在该元素下方的元素。
如果该方法在另一个文档(如<iframe> 的子文档)上运行,则坐标是相对于调用该方法的文档而言的。
如果指定的坐标点在文档的可视范围外,或者两个坐标都是负数,那么结果返回null。
如果需要查找元素内部的特定位置,请使用Document.caretPositionFromPoint()。
In this article
语法
js
elementFromPoint(x, y)参数
返回值
在给定的坐标点处的最顶层Element 对象。
示例
本例创建了两个按钮,用于设置位于坐标(2, 2) 下的段落元素的当前颜色。
JavaScript
js
function changeColor(newColor) { elem = document.elementFromPoint(2, 2); elem.style.color = newColor;}changeColor() 方法获取位于指定点的元素,然后将该元素的当前前景color 属性设置为newColor 参数指定的颜色。
HTML
html
<p>一些文字</p><button>变蓝</button><button>变红</button>HTML 提供了颜色将受影响的段落,以及两个按钮:一个按钮用于将段落颜色更改为蓝色,另一个按钮用于将段落颜色更改为红色。
结果
规范
| Specification |
|---|
| CSSOM View Module> # dom-document-elementfrompoint> |