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 Schreibgeschützt

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HighlightRegistry
[Symbol.iterator]
clear
delete
entries
forEach
get
has
keys
set
size
values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
See implementation notes.

Siehe auch