HighlightRegistry

Baseline 2025 *

Newly available

Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Die HighlightRegistry-Schnittstelle der CSS Custom Highlight API wird verwendet, um Highlight-Objekte zu registrieren, die über die API gestaltet werden können. Sie wird über CSS.highlights aufgerufen.

Eine HighlightRegistry-Instanz ist ein Map-ähnliches Objekt, in dem jeder Schlüssel ein Namens-String für ein benutzerdefiniertes Highlight ist, und der entsprechende Wert das zugehörige Highlight-Objekt ist.

Instanz-Eigenschaften

Die HighlightRegistry-Schnittstelle erbt keine Eigenschaften.

HighlightRegistry.size Schreibgeschützt: Gibt die Anzahl der momentan registrierten Highlight-Objekte zurück.

Instanz-Methoden

Die HighlightRegistry-Schnittstelle erbt keine Methoden.

HighlightRegistry.clear(): Entfernt alle Highlight-Objekte aus dem Registry.
HighlightRegistry.delete(): Entfernt das benannte Highlight-Objekt aus dem Registry.
HighlightRegistry.entries(): Gibt ein neues Iterator-Objekt zurück, das jedes Highlight-Objekt im Registry in Einfügereihenfolge enthält.
HighlightRegistry.forEach(): Ruft den gegebenen Callback einmal für jedes Highlight-Objekt im Registry in Einfügereihenfolge auf.
HighlightRegistry.get(): Ruft das benannte Highlight-Objekt aus dem Registry ab.
HighlightRegistry.has(): Gibt einen Boolean-Wert zurück, der angibt, ob ein Highlight-Objekt im Registry vorhanden ist oder nicht.
HighlightRegistry.highlightsFromPoint() Experimentell: Gibt ein Array von Objekten zurück, das die benutzerdefinierten Highlights darstellt, die an einem bestimmten Punkt innerhalb des Ansichtsbereichs angewendet werden.
HighlightRegistry.keys(): Ein Alias für HighlightRegistry.values().
HighlightRegistry.set(): Fügt das gegebene Highlight-Objekt mit dem gegebenen Namen zum Registry hinzu oder aktualisiert das benannte Highlight-Objekt, wenn es bereits im Registry existiert.
HighlightRegistry.values(): Gibt ein neues Iterator-Objekt zurück, das die Highlight-Objekte im Registry in Einfügereihenfolge liefert.

Beispiele

Ein Highlight registrieren

Das folgende Beispiel zeigt, wie Bereiche erstellt, ein neues Highlight-Objekt dafür instanziiert und das Highlight mittels der HighlightRegistry registriert wird, um es auf der Seite zu gestalten:

HTML

html

<p id="foo">CSS Custom Highlight API</p>

CSS

css

::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

JavaScript

const text = document.getElementById("foo").firstChild;

if (!CSS.highlights) {
  text.textContent =
    "The CSS Custom Highlight API is not supported in this browser!";
}

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(text, 0);
range1.setEnd(text, 3);

const range2 = new Range();
range2.setStart(text, 21);
range2.setEnd(text, 24);

// Create a custom highlight for these ranges.
const highlight = new Highlight(range1, range2);

// Register the ranges in the HighlightRegistry.
CSS.highlights.set("my-custom-highlight", highlight);

Ergebnis

Spezifikationen

Specification
CSS Custom Highlight API Module Level 1 # highlight-registry