CSS: highlights 静的プロパティ

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

highlights は CSS インターフェイスは静的な読み取り専用プロパティであり、interface は、CSS カスタムハイライト API (en-US) を使用して任意のテキスト範囲をスタイル設定するために用いる HighlightRegistry へのアクセス手段を提供します。

値

HighlightRegistry (en-US) オブジェクトです。

例

次の例は、複数のテキスト範囲を作成し、そのテキスト範囲に対して Highlight オブジェクトを作成し、このハイライトを HighlightRegistry に登録し、最後に ::highlight() (en-US) 擬似要素を使用してテキスト範囲にスタイルを設定する例を示しています。

js
const parentNode = document.getElementById("foo");

const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

const myCustomHighlight = new Highlight(range1, range2);

CSS.highlights.set("my-custom-highlight", myCustomHighlight);
css
::highlight(my-custom-highlight) {
  background-color: yellow;
  color: black;
}

仕様書

Specification
CSS Custom Highlight API Module Level 1
# dom-css-highlights

ブラウザーの互換性

BCD tables only load in the browser

関連情報