HighlightRegistry: highlightsFromPoint() 方法
HighlightRegistry 介面的 highlightsFromPoint() 方法會返回一個物件陣列，這些物件代表應用在視口內特定點的自定義高亮。
語法
highlightsFromPoint(x, y)
highlightsFromPoint(x, y, options)
引數
x-
用於從中返回自定義高亮資訊的視口內點的 x 座標。
y-
用於從中返回自定義高亮資訊的視口內點的 y 座標。
options可選-
一個包含選項的物件，這些選項可以包括：
shadowRoots-
一個
ShadowRoot物件陣列。除了在普通 DOM 中存在的高亮之外，陣列中陰影根（shadow roots）內指定點存在的所有自定義高亮也將包含在返回值中。預設情況下，不會返回陰影根內的自定義高亮。
返回值
一個 HighlightHitResult 物件陣列，代表透過 x 和 y 引數指定的視口點上應用的自定義高亮。
每個 HighlightHitResult 物件包含以下屬性：
highlight-
一個
Highlight物件，代表已應用的自定義高亮。 ranges-
一個
AbstractRange物件陣列，代表自定義高亮應用的範圍。
如果指定的點沒有應用自定義高亮，或者指定的點在視口之外，則該方法返回一個空陣列。
示例
輸出滑鼠指標位置應用的自定義高亮
在此示例中，您可以為一段文字應用自定義高亮。這些自定義高亮可以重疊。當用戶雙擊該段落時，我們使用 highlightsFromPoint() 方法來返回位於雙擊滑鼠指標座標處的任何自定義高亮的內容。
HTML
標記包含一個 <p> 元素，其中包含您可以應用自定義高亮的文字，以及一個 <section> 元素，我們將在此元素中輸出高亮顯示的文字片段。
<h1>highlightsFromPoint() demo</h1>
<p class="highlightable-text">
When you select a section of text then press "h" on the keyboard, the text you
selected will be given a custom highlight. Multiple highlights will be colored
yellow, red, and blue, in that order. When you double-click on a highlighted
section of text, that section will be outputted at the bottom of the UI. If
multiple highlights overlap the section, you'll see multiple text sections
outputted.
</p>
<h2>Highlighted text at point</h2>
<section></section>
CSS
CSS 中，我們為名為 highlight1、highlight2 和 highlight3 的三個自定義高亮定義了樣式。我們透過將每個自定義高亮的名稱傳遞給 ::highlight() 偽元素來選擇它們，並分別給它們黃色、紅色和藍色背景色。
:root::highlight(highlight1) {
background-color: rgb(255 255 0 / 0.5);
}
:root::highlight(highlight2) {
background-color: rgb(255 0 0 / 0.5);
}
:root::highlight(highlight3) {
background-color: rgb(0 0 255 / 0.75);
color: white;
}
JavaScript
此示例的指令碼包含兩個不同的功能區域：首先，我們需要建立自定義高亮並將其應用到我們的內容中；然後，我們可以使用 highlightsFromPoint() 方法從特定點返回自定義高亮。
建立和應用自定義高亮
為了建立自定義高亮，我們首先獲取對 <p> 元素及其包含的文字節點的引用。然後，我們建立一個名為 highlightCount 的變數，初始值設定為 1，稍後將用它來指定要應用哪個自定義高亮。
const pElem = document.querySelector(".highlightable-text");
const textNode = pElem.firstChild;
let highlightCount = 1;
接下來，我們定義一個 keydown 事件處理程式，當按下鍵盤上的 h 鍵時，它會為任何選定的文字應用自定義高亮。在處理程式內部，我們首先使用 Window.getSelection() 獲取選定的文字，並使用 Selection.getRangeAt() 將其轉換為 Range 物件。
我們檢查 selectedRange 物件的 startContainer 和 endContainer 是否都等於段落 textNode，以確保我們不允許任何跨容器的高亮。如果滿足條件，我們就使用 highlight${highlightCount++} 為 selectedRange 設定要應用的自定義 highlightName。由於我們遞增了 highlightCount，我們在此處添加了一個檢查——當它達到 4 時，我們將其重置回 1。這樣做的效果是，在設定高亮時，它們會按順序迴圈遍歷可用高亮。
最後，對於 keydown 事件處理程式，我們使用 Highlight() 建構函式建立一個新的 highlight 物件，並將之前建立的 selectedRange 傳遞給它。然後，我們使用 HighlightRegistry.set() 方法將 highlightName 中引用的選定自定義高亮應用到 highlight 物件上。
window.addEventListener("keydown", (event) => {
if (event.key === "h") {
const selection = window.getSelection();
const selectedRange = selection.getRangeAt(0);
if (
selectedRange.startContainer === textNode &&
selectedRange.endContainer === textNode
) {
const highlightName = `highlight${highlightCount++}`;
if (highlightCount === 4) {
highlightCount = 1;
}
const highlight = new Highlight(selectedRange);
CSS.highlights.set(highlightName, highlight);
}
}
});
從點返回自定義高亮
現在我們已經具備了建立和應用自定義高亮的能力，我們可以使用 highlightsFromPoint() 方法來返回在特定點應用的自定義高亮。
我們獲取對 <section> 元素的引用，然後定義一個 dblclick 事件處理程式函式，用於在滑鼠游標位置發生雙擊事件時輸出高亮顯示的文字。在處理程式內部，我們將當前滑鼠座標傳遞給 highlightsFromPoint() 呼叫，清除 <section> 元素的內容，然後遍歷 highlights 陣列中的每個高亮。
對於每個 highlight，我們獲取 ranges 陣列中的第一個範圍（在這種情況下，每個高亮只有一個範圍），然後使用 Range.toString() 獲取確切的高亮字串，並將其作為 <article> 元素的一部分新增到 <section> 元素的 innerHTML 中。
const section = document.querySelector("section");
pElem.addEventListener("dblclick", (event) => {
const highlights = CSS.highlights.highlightsFromPoint(
event.clientX,
event.clientY,
);
section.innerHTML = "";
for (highlight of highlights) {
const range = highlight.ranges[0];
const textSelection = range.toString();
section.innerHTML += `<article>${textSelection}</article>`;
}
});
結果
規範
| 規範 |
|---|
| CSS 自定義高亮 API 模組級別 1 # dom-highlightregistry-highlightsfrompoint |
瀏覽器相容性
載入中…