HighlightRegistry
基线 2025 *
新推出
HighlightRegistry 接口是 CSS Custom Highlight API 的一部分，用于注册 Highlight 对象，以便使用该 API 进行样式设置。它可以通过 CSS.highlights 访问。
HighlightRegistry 实例是一个 类 Map 对象，其中每个键是自定义高亮的名称字符串，对应的值是关联的 Highlight 对象。
实例属性
HighlightRegistry 接口不继承任何属性。
HighlightRegistry.size只读-
返回当前注册的
Highlight对象的数量。
实例方法
HighlightRegistry 接口不继承任何方法。.
HighlightRegistry.clear()-
从注册表中移除所有
Highlight对象。 HighlightRegistry.delete()-
从注册表中移除指定的
Highlight对象。 HighlightRegistry.entries()-
返回一个新的迭代器对象，其中包含注册表中每个
Highlight对象，按插入顺序排列。 HighlightRegistry.forEach()-
对注册表中的每个
Highlight对象，按插入顺序调用给定的回调函数一次。 HighlightRegistry.get()-
从注册表中获取指定的
Highlight对象。 HighlightRegistry.has()-
返回一个布尔值，断言注册表中是否存在指定的
Highlight对象。 HighlightRegistry.highlightsFromPoint()实验性质-
返回一个对象数组，表示在视口内特定点应用的自定义高亮。
HighlightRegistry.keys()-
是
HighlightRegistry.values()的别名。 HighlightRegistry.set()-
使用给定名称将给定的
Highlight对象添加到注册表中，或者如果该对象已存在于注册表中，则更新该命名的高亮对象。 HighlightRegistry.values()-
返回一个新的迭代器对象，该对象会按插入顺序生成注册表中的
Highlight对象。
示例
注册高亮
以下示例演示了如何创建范围、为它们实例化新的 Highlight 对象，并使用 HighlightRegistry 注册该高亮，以便在页面上对其进行样式设置。
HTML
html
<p id="foo">CSS Custom Highlight API</p>
CSS
css
::highlight(my-custom-highlight) {
background-color: peachpuff;
}
JavaScript
js
const text = document.getElementById("foo").firstChild;
if (!CSS.highlights) {
text.textContent =
"The CSS Custom Highlight API is not supported in this browser!";
}
// Create a couple of ranges.
const range1 = new Range();
range1.setStart(text, 0);
range1.setEnd(text, 3);
const range2 = new Range();
range2.setStart(text, 21);
range2.setEnd(text, 24);
// Create a custom highlight for these ranges.
const highlight = new Highlight(range1, range2);
// Register the ranges in the HighlightRegistry.
CSS.highlights.set("my-custom-highlight", highlight);
结果
规范
| 规范 |
|---|
| CSS 自定义高亮 API 模块级别 1 # highlight-registry |
浏览器兼容性
加载中…