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 benannteHighlight
-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
<p id="foo">CSS Custom Highlight API</p>
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 |
Browser-Kompatibilität
BCD tables only load in the browser