HighlightRegistry
Baseline
2025
*
Neu verfügbar
Seit June 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Das HighlightRegistry-Interface der CSS Custom Highlight API wird verwendet, um Highlight-Objekte zu registrieren, die mithilfe der API gestylt werden sollen. Es wird über CSS.highlights aufgerufen.
Eine HighlightRegistry-Instanz ist ein Map-ähnliches Objekt, bei dem jeder Schlüssel eine Zeichenkette für einen benutzerdefinierten Highlight darstellt und der entsprechende Wert das zugehörige Highlight-Objekt ist.
Instanzeigenschaften
Das HighlightRegistry-Interface erbt keine Eigenschaften.
HighlightRegistry.sizeSchreibgeschützt-
Gibt die Anzahl der derzeit registrierten
Highlight-Objekte zurück.
Instanzmethoden
Das HighlightRegistry-Interface erbt keine Methoden.
HighlightRegistry.clear()-
Entfernen Sie alle
Highlight-Objekte aus dem Register. HighlightRegistry.delete()-
Entfernen Sie 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 für jedes
Highlight-Objekt im Register den angegebenen Callback in Einfügereihenfolge auf. HighlightRegistry.get()-
Holen Sie das benannte
Highlight-Objekt aus dem Register. HighlightRegistry.has()-
Gibt einen booleschen Wert zurück, der angibt, ob ein
Highlight-Objekt im Register vorhanden ist oder nicht. HighlightRegistry.highlightsFromPoint()-
Gibt ein Array von Objekten zurück, die die benutzerdefinierten Highlights darstellen, die an einem bestimmten Punkt im Ansichtsfenster angewendet wurden.
HighlightRegistry.keys()-
Ein Alias für
HighlightRegistry.values(). HighlightRegistry.set()-
Fügt das angegebene
Highlight-Objekt mit dem angegebenen Namen in das Register ein oder aktualisiert das benannteHighlight-Objekt, falls es bereits im Register existiert. HighlightRegistry.values()-
Gibt ein neues Iterator-Objekt zurück, das die
Highlight-Objekte im Register in Einfügereihenfolge liefert.
Beispiele
Registrieren eines Highlights
Das folgende Beispiel zeigt, wie Bereiche erstellt, ein neues Highlight-Objekt für diese instanziiert und das Highlight mithilfe des 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
| Spezifikation |
|---|
| CSS Custom Highlight API Module Level 1 # highlight-registry |