Highlight
Baseline 2025Newly available
Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Highlight は CSS カスタムハイライト API のインターフェイスで、この API で使用する Range インスタンスの集合を表すために使用します。
ページ内の任意の範囲にスタイルを設定するには、新しい Highlight オブジェクトを構築し、1 つ以上の Range オブジェクトを追加して、 HighlightRegistry を使用して登録します。
Highlight インスタンスは Set 風オブジェクトであり、 1 つ以上の Range オブジェクトを保持することができます。
コンストラクター
Highlight()-
新しく作成された
Highlightオブジェクトを返します。
インスタンスプロパティ
Highlight インスタンスが継承しているプロパティはありません。
Highlight.priority-
この
Highlightオブジェクトの優先度を示す数値です。複数のハイライトが重なっている場合、ブラウザーはこの優先度を使用して、重なっている部分のスタイル設定を決定します。 Highlight.size読取専用-
Highlight オブジェクトの範囲の数を返します。
Highlight.type-
列挙型文字列で、ハイライトの意味を指定するために使用されます。これにより、支援技術は、ハイライトをユーザーに公開する際にこの意味を含めることができます。
インスタンスメソッド
Highlight インターフェイスが継承しているメソッドはありません。
Highlight.add()-
このハイライトに新しい範囲を追加します。
Highlight.clear()-
このハイライトからすべての範囲を除去します。
Highlight.delete()-
このハイライトから一つの範囲を除去します。
Highlight.entries()-
ハイライトオブジェクト内のそれぞれの範囲を挿入順で反復処理する、新しいイテレーターオブジェクトを返します。
Highlight.forEach()-
ハイライトオブジェクト内のそれぞれの範囲について、指定されたコールバックを挿入順に 1 回ずつ呼び出します。
Highlight.has()-
ある範囲がハイライトオブジェクトに存在するかどうかを論理値で返します。
Highlight.keys()-
Highlight.values()の別名です。 Highlight.values()-
ハイライトオブジェクトの範囲を挿入順に返す新しいイテレーターオブジェクトを返します。
例
次の例は、範囲を作成し、その範囲に対して新しい Highlight オブジェクトを構築し、ページ上でスタイル設定されるように登録する方法を示しています。
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 highlight = new Highlight(range1, range2);
// 範囲を HighlightRegistry に登録
CSS.highlights.set("my-custom-highlight", highlight);
次の CSS コードスニペットは、 ::highlight 擬似要素を使用して、登録したカスタムハイライトのスタイルを設定する方法を示しています。
::highlight(my-custom-highlight) {
background-color: peachpuff;
}
仕様書
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # highlight |