HighlightRegistry
The HighlightRegistry
interface of the CSS Custom Highlight API is used to register Highlight
objects to be styled using the API. It is accessed via CSS.highlights
.
A HighlightRegistry
instance is a Map
-like object, in which each key is the name string for a custom highlight, and the corresponding value is the associated Highlight
object.
实例属性
The HighlightRegistry
interface doesn't inherit any properties.
HighlightRegistry.size
只读-
Returns the number of
Highlight
objects currently registered.
实例方法
The HighlightRegistry
interface doesn't inherit any methods.
HighlightRegistry.clear()
-
Remove all
Highlight
objects from the registry. HighlightRegistry.delete()
-
Remove the named
Highlight
object from the registry. HighlightRegistry.entries()
-
Returns a new iterator object that contains each
Highlight
object in the registry, in insertion order. HighlightRegistry.forEach()
-
Calls the given callback once for each
Highlight
object in the registry, in insertion order. HighlightRegistry.get()
-
Gets the named
Highlight
object from the registry. HighlightRegistry.has()
-
Returns a boolean asserting whether a
Highlight
object is present the registry or not. HighlightRegistry.keys()
-
An alias for
HighlightRegistry.values()
. HighlightRegistry.set()
-
Adds the given
Highlight
object to the registry with the given name, or updates the namedHighlight
object, if it already exists in the registry. HighlightRegistry.values()
-
Returns a new iterator object that yields the
Highlight
objects in the registry, in insertion order.
示例
注册高亮
以下示例演示了如何创建范围、为其实例化新的 Highlight
对象,以及使用 HighlightRegistry
注册高亮,以在页面上对其进行样式化
HTML
<p id="foo">CSS Custom Highlight API</p>
CSS
::highlight(my-custom-highlight) {
background-color: peachpuff;
}
JavaScript
const text = document.getElementById("foo").firstChild;
if (!CSS.highlights) {
text.textContent =
"The CSS Custom Highlight API is not supported in this browser!";
}
// Create a couple of ranges.
const range1 = new Range();
range1.setStart(text, 0);
range1.setEnd(text, 3);
const range2 = new Range();
range2.setStart(text, 21);
range2.setEnd(text, 24);
// 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 自定义高亮 API 模块级别 1 # highlight-registry |
浏览器兼容性
BCD 表格仅在浏览器中加载