HighlightRegistry

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das HighlightRegistry-Interface der CSS Custom Highlight API wird verwendet, um Highlight-Objekte zu registrieren, die mit der API gestylt werden sollen. Es wird über CSS.highlights aufgerufen.

Eine HighlightRegistry-Instanz ist ein Map-ähnliches Objekt, wobei jeder Schlüssel den Namen für ein benutzerdefiniertes Highlight darstellt und der entsprechende Wert das zugehörige Highlight-Objekt ist.

Instanz-Eigenschaften

Das HighlightRegistry-Interface erbt keine Eigenschaften.

HighlightRegistry.size Nur lesbar

Gibt die Anzahl der derzeit registrierten Highlight-Objekte zurück.

Instanz-Methoden

Das HighlightRegistry-Interface erbt keine Methoden.

HighlightRegistry.clear()

Entfernt alle Highlight-Objekte aus dem Register.

HighlightRegistry.delete()

Entfernt das benannte Highlight-Objekt aus dem Register.

HighlightRegistry.entries()

Gibt ein neues Iterator-Objekt zurück, das jedes Highlight-Objekt im Register in Einfügereihenfolge enthält.

HighlightRegistry.forEach()

Ruft den gegebenen Callback einmal für jedes Highlight-Objekt im Register in Einfügereihenfolge auf.

HighlightRegistry.get()

Ruft das benannte Highlight-Objekt aus dem Register ab.

HighlightRegistry.has()

Gibt ein Boolean zurück, das angibt, ob ein Highlight-Objekt im Register vorhanden ist oder nicht.

HighlightRegistry.keys()

Ein Alias für HighlightRegistry.values().

HighlightRegistry.set()

Fügt das angegebene Highlight-Objekt dem Register mit dem angegebenen Namen hinzu oder aktualisiert das benannte Highlight-Objekt, wenn es bereits im Register vorhanden ist.

HighlightRegistry.values()

Gibt ein neues Iterator-Objekt zurück, das die Highlight-Objekte im Register in Einfügereihenfolge ausgibt.

Beispiele

Ein Highlight registrieren

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

HTML

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

CSS

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

JavaScript

js
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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch