Highlight
Highlight 接口是 CSS 自定义高亮 API 的一部分，用于表示一组要使用该 API 进行样式的 Range 实例。
要对页面中的任意范围进行样式设置，请实例化一个新的 Highlight 对象，向其中添加一个或多个 Range 对象，然后使用 HighlightRegistry 注册它。
Highlight 实例是一个 Set 样式的对象，可以包含一个或多个 Range 对象。
构造函数
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()-
返回一个包含高亮对象中范围的新迭代器对象，按插入顺序排列。
示例
以下示例演示了如何对文本块的特定部分进行高亮显示。
html
<p class="foo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
sapiente non eum facere? Nam rem hic culpa, ipsa rerum ab itaque consectetur
molestiae dolores vitae! Quo ex explicabo tempore? Tenetur.</p>
此 JavaScript 代码创建 范围，为它们实例化一个新的 Highlight 对象，并 注册它以便在页面上进行样式设置。
js
const parentNode = document.querySelector(".foo");
const textNode = parentNode.firstChild;
// Create a couple of ranges.
const range1 = new Range();
range1.setStart(textNode, 6);
range1.setEnd(textNode, 21);
const range2 = new Range();
range2.setStart(textNode, 57);
range2.setEnd(textNode, 71);
// 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 伪元素来设置已注册的自定义高亮的样式。
css
::highlight(my-custom-highlight) {
background-color: peachpuff;
}
结果
规范
| 规范 |
|---|
| CSS 自定义高亮 API 模块级别 1 # highlight |
浏览器兼容性
加载中…