我们很高兴地宣布,Microsoft Edge 140及其他基于Chromium的浏览器现已提供highlightsFromPoint()方法。这是对CSS自定义高亮API的有力补充,使得在给定x、y坐标位置查找现有高亮成为可能。
在CSS中绘制高亮
CSS自定义高亮API允许您高亮任意文本范围,而无需向DOM添加新元素。该API通过在JavaScript中创建Range对象,使用CSS.highlights注册表注册这些范围,然后通过::highlight()伪元素在CSS中实现高亮:
该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演示查看实际效果(源代码)。
其他*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的反馈,包括它让您实现的用例、对未来改进的想法,或者您可能遇到的问题。
关于API的反馈,请在CSS工作组仓库中提交问题。如果您的反馈是关于Microsoft Edge中的错误,请直接通过浏览器向我们团队发送反馈:转到"设置和更多"(…)> “帮助和反馈” > “发送反馈”。