解锁文本编辑新境界：探索highlightsFromPoint及其他FromPoint API

我们很高兴宣布，在Microsoft Edge 140及其他基于Chromium的浏览器中，现已提供highlightsFromPoint()方法。这是对CSS自定义高亮API的一个有用补充，使得在给定x、y坐标处查找现有高亮成为可能。

在CSS中绘制高亮

CSS自定义高亮API允许您高亮任意文本范围，而无需向DOM添加新元素。该API通过在JavaScript中创建Range对象，使用CSS.highlights注册表注册这些范围，然后通过::highlight()伪元素在CSS中高亮这些范围来实现：

1
2
3
4


// 创建范围并注册高亮
const range = new Range();
const highlight = new Highlight(range);
CSS.highlights.set("my-highlight", highlight);

1
2
3


::highlight(my-highlight) {
  background-color: yellow;
}

该API非常适合对不需要或不能存在于DOM中的文本范围进行动态样式设置，这在客户端文本编辑器中很常见。

以下截图显示了使用CSS自定义高亮API创建的不同类型高亮（参见实时演示）：

介绍highlightsFromPoint()

从Edge 140开始，我们为这个拼图添加了另一块：CSS.highlights.highlightsFromPoint()方法。这个新方法让您能够检测屏幕上给定x、y坐标位置存在的自定义高亮，从而可以更改高亮外观或在其周围显示其他UI元素。这使得实现拼写检查、协作编辑、工具提示、上下文菜单或搜索等功能变得更加简单。

CSS.highlights.highlightsFromPoint()可以检测DOM和Shadow DOM中的高亮及其对应的文本范围，而无需编写复杂的命中测试代码。现在，添加交互功能，特别是在处理重叠高亮或Shadow DOM时，具有更高的性能，且更加容易。

以下截图显示了一个弹出窗口，列出了用户点击的文本范围上应用的三个重叠高亮：

要了解更多信息，请参阅MDN上的HighlightRegistry: highlightsFromPoint()方法，并通过我们的API演示（源代码）查看API的实际应用。

其他*FromPoint API

highlightsFromPoint()方法可能会让您想起其他类似命名的方法：

document.elementsFromPoint()（及其ShadowRoot等效方法）
document.elementFromPoint()（及其ShadowRoot等效方法）
document.caretPositionFromPoint()

与highlightsFromPoint()一样，这些方法也基于屏幕上的x、y坐标提供DOM信息，它们在对用户通过点击或悬停与UI交互，且需要基于位置的检测而不是使用预设事件监听器或显式元素引用的情况下非常有用。

*FromPoint API特别适用于文本编辑场景，但也可用于实现拖放、在特定坐标模拟操作（如在自动化测试或游戏中），以及使工具或扩展能够在不知道元素ID或选择器的情况下识别页面元素。

查看我们的高亮器演示（和源代码），了解如何将caretPositionFromPoint和highlightsFromPoint结合使用，让用户能够在文本中创建和删除不同的高亮，而无需创建额外的DOM元素。

反馈意见

我们很想听听您对新的CSS.highlights.highlightsFromPoint() API的反馈，例如它允许您实现的用例、您对未来改进的想法，或者您可能遇到的问题。