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
中注册该高亮显示:
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;
}
规范
Specification |
---|
CSS Custom Highlight API Module Level 1 # highlight |
浏览器兼容性
BCD tables only load in the browser