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 named Highlight 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

html
<p id="foo">CSS Custom Highlight API</p>

CSS

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

JavaScript

js
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 表格仅在浏览器中加载

另请参阅