Highlight

Highlight() (en-US)

返回新创建的 Highlight 对象。

Highlight 接口不继承任何属性。

Highlight.priority (en-US)

表示此 Highlight 对象优先级的数字。当多个高亮重叠时，浏览器会根据该优先级来决定如何为重叠部分添加样式。

Highlight.size (en-US) 只读

返回 Highlight 对象中 range 的数量。

Highlight.type (en-US)

用于说明该高亮语义的可枚举 String。这样，辅助技术在向用户展示高亮时就能包含该语义。

Highlight 接口不继承任何方法。

Highlight.add() (en-US)

向此高亮对象中添加一个新范围。

Highlight.clear() (en-US)

移除此高亮对象中的所有范围。

Highlight.delete() (en-US)

从此高亮对象中移除一个范围。

Highlight.entries() (en-US)

返回一个新的迭代器对象，该对象包含了高亮对象中的所有范围，按插入顺序排列。

Highlight.forEach() (en-US)

按插入顺序为该高亮对象中的每个范围执行一次提供的函数。

Highlight.has() (en-US)

返回一个布尔值来指示对应的范围是否存在于该高亮对象中。

Highlight.keys() (en-US)

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

Highlight.values() (en-US)

返回一个新的迭代器对象，该对象包含此高亮对象中每个范围，按插入顺序排列。

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

const parentNode = document.getElementById("foo");

// 创建多个文本范围。
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

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

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

以下 CSS 代码片段演示了如何使用 ::highlight 伪元素为已注册的自定义高亮显示设置样式：

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

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