HighlightRegistry: highlightsFromPoint() 方法
HighlightRegistry 接口的 highlightsFromPoint() 方法会返回一个对象数组，这些对象代表应用在视口内特定点的自定义高亮。
语法
highlightsFromPoint(x, y)
highlightsFromPoint(x, y, options)
参数
x-
用于从中返回自定义高亮信息的视口内点的 x 坐标。
y-
用于从中返回自定义高亮信息的视口内点的 y 坐标。
options可选-
一个包含选项的对象，这些选项可以包括：
shadowRoots-
一个
ShadowRoot对象数组。除了在普通 DOM 中存在的高亮之外，数组中阴影根（shadow roots）内指定点存在的所有自定义高亮也将包含在返回值中。默认情况下，不会返回阴影根内的自定义高亮。
返回值
一个 HighlightHitResult 对象数组，代表通过 x 和 y 参数指定的视口点上应用的自定义高亮。
每个 HighlightHitResult 对象包含以下属性：
highlight-
一个
Highlight对象，代表已应用的自定义高亮。 ranges-
一个
AbstractRange对象数组，代表自定义高亮应用的范围。
如果指定的点没有应用自定义高亮，或者指定的点在视口之外，则该方法返回一个空数组。
示例
输出鼠标指针位置应用的自定义高亮
在此示例中，您可以为一段文本应用自定义高亮。这些自定义高亮可以重叠。当用户双击该段落时，我们使用 highlightsFromPoint() 方法来返回位于双击鼠标指针坐标处的任何自定义高亮的内容。
HTML
标记包含一个 <p> 元素，其中包含您可以应用自定义高亮的文本，以及一个 <section> 元素，我们将在此元素中输出高亮显示的文本片段。
<h1>highlightsFromPoint() demo</h1>
<p class="highlightable-text">
When you select a section of text then press "h" on the keyboard, the text you
selected will be given a custom highlight. Multiple highlights will be colored
yellow, red, and blue, in that order. When you double-click on a highlighted
section of text, that section will be outputted at the bottom of the UI. If
multiple highlights overlap the section, you'll see multiple text sections
outputted.
</p>
<h2>Highlighted text at point</h2>
<section></section>
CSS
CSS 中，我们为名为 highlight1、highlight2 和 highlight3 的三个自定义高亮定义了样式。我们通过将每个自定义高亮的名称传递给 ::highlight() 伪元素来选择它们，并分别给它们黄色、红色和蓝色背景色。
:root::highlight(highlight1) {
background-color: rgb(255 255 0 / 0.5);
}
:root::highlight(highlight2) {
background-color: rgb(255 0 0 / 0.5);
}
:root::highlight(highlight3) {
background-color: rgb(0 0 255 / 0.75);
color: white;
}
JavaScript
此示例的脚本包含两个不同的功能区域：首先，我们需要创建自定义高亮并将其应用到我们的内容中；然后，我们可以使用 highlightsFromPoint() 方法从特定点返回自定义高亮。
创建和应用自定义高亮
为了创建自定义高亮，我们首先获取对 <p> 元素及其包含的文本节点的引用。然后，我们创建一个名为 highlightCount 的变量，初始值设置为 1，稍后将用它来指定要应用哪个自定义高亮。
const pElem = document.querySelector(".highlightable-text");
const textNode = pElem.firstChild;
let highlightCount = 1;
接下来，我们定义一个 keydown 事件处理程序，当按下键盘上的 h 键时，它会为任何选定的文本应用自定义高亮。在处理程序内部，我们首先使用 Window.getSelection() 获取选定的文本，并使用 Selection.getRangeAt() 将其转换为 Range 对象。
我们检查 selectedRange 对象的 startContainer 和 endContainer 是否都等于段落 textNode，以确保我们不允许任何跨容器的高亮。如果满足条件，我们就使用 highlight${highlightCount++} 为 selectedRange 设置要应用的自定义 highlightName。由于我们递增了 highlightCount，我们在此处添加了一个检查——当它达到 4 时，我们将其重置回 1。这样做的效果是，在设置高亮时，它们会按顺序循环遍历可用高亮。
最后，对于 keydown 事件处理程序，我们使用 Highlight() 构造函数创建一个新的 highlight 对象，并将之前创建的 selectedRange 传递给它。然后，我们使用 HighlightRegistry.set() 方法将 highlightName 中引用的选定自定义高亮应用到 highlight 对象上。
window.addEventListener("keydown", (event) => {
if (event.key === "h") {
const selection = window.getSelection();
const selectedRange = selection.getRangeAt(0);
if (
selectedRange.startContainer === textNode &&
selectedRange.endContainer === textNode
) {
const highlightName = `highlight${highlightCount++}`;
if (highlightCount === 4) {
highlightCount = 1;
}
const highlight = new Highlight(selectedRange);
CSS.highlights.set(highlightName, highlight);
}
}
});
从点返回自定义高亮
现在我们已经具备了创建和应用自定义高亮的能力，我们可以使用 highlightsFromPoint() 方法来返回在特定点应用的自定义高亮。
我们获取对 <section> 元素的引用，然后定义一个 dblclick 事件处理程序函数，用于在鼠标光标位置发生双击事件时输出高亮显示的文本。在处理程序内部，我们将当前鼠标坐标传递给 highlightsFromPoint() 调用，清除 <section> 元素的内容，然后遍历 highlights 数组中的每个高亮。
对于每个 highlight，我们获取 ranges 数组中的第一个范围（在这种情况下，每个高亮只有一个范围），然后使用 Range.toString() 获取确切的高亮字符串，并将其作为 <article> 元素的一部分添加到 <section> 元素的 innerHTML 中。
const section = document.querySelector("section");
pElem.addEventListener("dblclick", (event) => {
const highlights = CSS.highlights.highlightsFromPoint(
event.clientX,
event.clientY,
);
section.innerHTML = "";
for (highlight of highlights) {
const range = highlight.ranges[0];
const textSelection = range.toString();
section.innerHTML += `<article>${textSelection}</article>`;
}
});
结果
规范
| 规范 |
|---|
| CSS 自定义高亮 API 模块级别 1 # dom-highlightregistry-highlightsfrompoint |
浏览器兼容性
加载中…