Highlight

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

CSS 自定义高亮 API 的 Highlight 接口用于表示使用此 API 在文档上设置样式的 Range 实例集合。

要为页面中的任意范围添加样式，可实例化一个新的 Highlight 对象，向其中添加一个或多个 Range 对象，然后使用 HighlightRegistry 注册该对象。

Highlight 实例是一个 类 Set 对象，可以容纳一个或多个 Range 对象。

构造函数

Highlight()

返回新创建的 Highlight 对象。

实例属性

Highlight 接口不继承任何属性。

Highlight.priority

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

Highlight.size 只读

返回 Highlight 对象中 range 的数量。

Highlight.type

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

实例方法

Highlight 接口不继承任何方法。

Highlight.add()

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

Highlight.clear()

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

Highlight.delete()

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

Highlight.entries()

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

Highlight.forEach()

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

Highlight.has()

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

Highlight.keys()

Highlight.values() 方法的别名。

Highlight.values()

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

示例

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

js
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 伪元素为已注册的自定义高亮显示设置样式：

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

规范

Specification
CSS Custom Highlight API Module Level 1
# highlight

浏览器兼容性

BCD tables only load in the browser

参见