重点

Highlight()

返回一个新创建的 Highlight 对象。

Highlight 接口不继承任何属性。

Highlight.priority

一个表示此 Highlight 对象优先级的数字。当多个突出显示重叠时，浏览器使用此优先级来决定如何对重叠部分进行样式化。

Highlight.size 只读

返回 Highlight 对象中的范围数量。

Highlight.type

一个枚举的 String，用于指定突出显示的语义含义。这使辅助技术能够在向用户公开突出显示时包含此含义。

Highlight 接口不继承任何方法.

Highlight.add()

向此突出显示添加一个新范围。

Highlight.clear()

从此突出显示中删除所有范围。

Highlight.delete()

从此突出显示中删除一个范围。

Highlight.entries()

返回一个新的迭代器对象，其中包含突出显示对象中的每个范围，按插入顺序排列。

Highlight.forEach()

按插入顺序对突出显示对象中的每个范围调用一次给定的回调函数。

Highlight.has()

返回一个布尔值，断言一个范围是否存在于突出显示对象中。

Highlight.keys()

是 Highlight.values() 的别名。

Highlight.values()

返回一个新的迭代器对象，按插入顺序生成突出显示对象中的范围。

以下示例演示了如何创建范围、为它们实例化一个新的 Highlight 对象，并将其注册以在页面上进行样式化

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

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

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

// 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 代码片段演示了如何通过使用 ::highlight 伪元素来样式化注册的自定义突出显示

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

• CSS 自定义突出显示 API
• CSS 自定义突出显示 API：Web 上文本范围突出显示的未来