Highlight

コンストラクター

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;
}

仕様書

ブラウザーの互換性

関連情報

• CSS カスタムハイライト API
• CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web