HighlightRegistry

HighlightRegistry 接口不继承任何属性。

HighlightRegistry.size (en-US) 只读

返回当前已注册的 Highlight 对象的数量。

HighlightRegistry 接口不继承任何方法。

HighlightRegistry.clear() (en-US)

从注册表中移除所有 Highlight 对象。

HighlightRegistry.delete() (en-US)

从注册表中删除具有指定名称的 Highlight 对象。

HighlightRegistry.entries() (en-US)

返回一个新的迭代器对象，该对象包含了注册表中的所有 Highlight 对象，按插入顺序排列。

HighlightRegistry.forEach() (en-US)

按插入顺序为注册表中的每个 Highlight 对象执行一次提供的函数。

HighlightRegistry.get() (en-US)

从注册表中获取指定的 Highlight 对象。

HighlightRegistry.has() (en-US)

返回一个指示对应的 Highlight 对象是否存在于该注册表中的布尔值。

HighlightRegistry.keys() (en-US)

HighlightRegistry.values() (en-US) 方法的别名。

HighlightRegistry.set() (en-US)

添加给定名称的 Highlight 对象到注册表，如果该名称的对象已存在则覆盖原值。

HighlightRegistry.values() (en-US)

返回一个新的迭代器对象，该对象包含此注册表中每个 Highlight 对象，按插入顺序排列。

以下示例演示了如何创建多个文本范围，然后为它们创建 Highlight 对象，并在 HighlightRegistry 中注册该高亮显示：

HTML

<p id="foo">CSS 自定义高亮 API</p>

CSS

::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

JavaScript

const text = document.getElementById("foo").firstChild;

if (!CSS.highlights) {
  text.textContent = "此浏览器不支持 CSS 自定义高亮 API！";
}

// 创建多个文本范围。
const range1 = new Range();
range1.setStart(text, 0);
range1.setEnd(text, 3);

const range2 = new Range();
range2.setStart(text, 10);
range2.setEnd(text, 13);

// 为文本范围创建自定义高亮。
const highlight = new Highlight(range1, range2);

// 在 HighlightRegistry 中注册文本范围。
CSS.highlights.set("my-custom-highlight", highlight);

结果

• CSS 自定义高亮 API
• CSS 自定义高亮 API：网页文本范围高亮的未来