CSS 自定義高亮 API

CSS 自定義高亮 API 模組提供了一種程式設計式的方法，可以針對由 Range 物件定義的特定文字範圍，而不會影響底層的 DOM 結構。然後可以透過 ::highlight() 偽元素選擇這些 Range 物件，並新增和刪除高亮樣式。該模組的功能可以建立類似於文字編輯器高亮拼寫或語法錯誤，以及程式碼編輯器高亮語法錯誤的高亮效果。

CSS 自定義高亮 API 擴充套件了其他高亮偽元素的概念，例如 ::selection、::spelling-error、::grammar-error 和 ::target-text，它提供了一種建立任意文字範圍（在 JavaScript 中定義為 Range 物件）並透過 CSS 進行樣式設定的方法，而不是侷限於瀏覽器定義的範圍。

自定義高亮 API 的實際應用

要使用 CSS 自定義高亮 API 在網頁上啟用文字範圍的樣式設定，你需要建立一個 Range 物件，然後為該範圍建立一個 Highlight 物件。使用 HighlightRegistry.set() 方法註冊高亮後，你可以使用 ::highlight() 偽元素選擇該範圍。在 set() 方法中定義的名稱用作 ::highlight() 偽元素選擇器的引數來選擇該範圍。透過 ::highlight() 偽元素選擇的範圍可以使用有限數量的屬性進行樣式設定。

<h1>Directions</h1>
<h2>Lincoln Memorial to Martin Luther King, Jr. Memorial</h2>
<ol><li>Head south on Lincoln Memorial Circle</li
  ><li>Turn right toward Independence Ave</li
  ><li>Turn left onto Independence Ave</li
  ><li>Turn right onto West Basin Dr</li
  ><li>Look up when you reach 64 Independence Ave!</li>
</ol>
<hr />
<label
  >Number of steps completed:
  <input type="number" min="0" max="5" value="0" id="currentStep" />
</label>

此示例使用 text-decoration 屬性劃掉我們 JavaScript 定義的 steps 高亮範圍

css

::highlight(steps) {
  text-decoration: line-through;
  color: blue;
}

我們建立了一個具有開始和結束節點（在此例中是同一個節點）的 Range。然後我們使用 CSS HighlightRegistry 介面的 set() 方法將此範圍設定為 Highlight。

const rangeToHighlight = new Range();
const list = document.querySelector("ol");
rangeToHighlight.setStart(list, 0);
rangeToHighlight.setEnd(list, 0);

CSS.highlights.set("steps", new Highlight(rangeToHighlight));

當完成的步驟數發生變化時，事件監聽器會更新高亮範圍的末尾

const currentPositionSlider = document.querySelector("input");
currentPositionSlider.addEventListener("change", (e) => {
  rangeToHighlight.setEnd(list, e.target.value);
});