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 |
瀏覽器相容性
載入中…