HighlightRegistry
基線 2025 *
新推出
HighlightRegistry 介面是 CSS Custom Highlight API 的一部分，用於註冊 Highlight 物件，以便使用該 API 進行樣式設定。它可以透過 CSS.highlights 訪問。
HighlightRegistry 例項是一個 類 Map 物件，其中每個鍵是自定義高亮的名稱字串，對應的值是關聯的 Highlight 物件。
例項屬性
HighlightRegistry 介面不繼承任何屬性。
HighlightRegistry.size只讀-
返回當前註冊的
Highlight物件的數量。
例項方法
HighlightRegistry 介面不繼承任何方法。.
HighlightRegistry.clear()-
從登錄檔中移除所有
Highlight物件。 HighlightRegistry.delete()-
從登錄檔中移除指定的
Highlight物件。 HighlightRegistry.entries()-
返回一個新的迭代器物件，其中包含登錄檔中每個
Highlight物件，按插入順序排列。 HighlightRegistry.forEach()-
對登錄檔中的每個
Highlight物件，按插入順序呼叫給定的回撥函式一次。 HighlightRegistry.get()-
從登錄檔中獲取指定的
Highlight物件。 HighlightRegistry.has()-
返回一個布林值，斷言登錄檔中是否存在指定的
Highlight物件。 HighlightRegistry.highlightsFromPoint()實驗性質-
返回一個物件陣列，表示在視口內特定點應用的自定義高亮。
HighlightRegistry.keys()-
是
HighlightRegistry.values()的別名。 HighlightRegistry.set()-
使用給定名稱將給定的
Highlight物件新增到登錄檔中，或者如果該物件已存在於登錄檔中，則更新該命名的高亮物件。 HighlightRegistry.values()-
返回一個新的迭代器物件，該物件會按插入順序生成登錄檔中的
Highlight物件。
示例
註冊高亮
以下示例演示瞭如何建立範圍、為它們例項化新的 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 |
瀏覽器相容性
載入中…