Highlight
Baseline 2025
Neu verfügbar
Seit Juni 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.
Die Highlight-Schnittstelle der CSS Custom Highlight API repräsentiert eine Sammlung von AbstractRange-Instanzen, die mithilfe der API gestaltet werden können.
Um beliebige Bereiche auf einer Seite zu gestalten, erstellen Sie ein neues Highlight-Objekt, fügen Sie ihm ein oder mehrere AbstractRange-Objekte hinzu und registrieren Sie es über die HighlightRegistry.
Eine Highlight-Instanz ist ein Set-ähnliches Objekt, das ein oder mehrere AbstractRange-Objekte enthalten kann.
Konstruktor
Highlight()-
Gibt ein neu erstelltes
Highlight-Objekt zurück.
Instanzeigenschaften
Die Highlight-Schnittstelle erbt keine Eigenschaften.
Highlight.priority-
Eine Zahl, die die Priorität dieses
Highlight-Objekts angibt. Wenn sich mehrere Hervorhebungen überlappen, bestimmt der Browser anhand dieser Priorität, wie die überlappenden Teile gestaltet werden. Highlight.sizeSchreibgeschützt-
Gibt die Anzahl der Bereiche im
Highlight-Objekt zurück. Highlight.type-
Ein Aufzählungswert vom Typ
String, der die semantische Bedeutung der Hervorhebung angibt. So können assistive Technologien diese Bedeutung berücksichtigen, wenn sie die Hervorhebung für Benutzer zugänglich machen.
Instanzmethoden
Die Highlight-Schnittstelle erbt keine Methoden.
Highlight.add()-
Fügt dieser Hervorhebung einen neuen Bereich hinzu.
Highlight.clear()-
Entfernt alle Bereiche aus dieser Hervorhebung.
Highlight.delete()-
Entfernt einen Bereich aus dieser Hervorhebung.
Highlight.entries()-
Gibt ein neues Iterator-Objekt zurück, das alle Bereiche im Hervorhebungsobjekt in der Reihenfolge enthält, in der sie hinzugefügt wurden.
Highlight.forEach()-
Ruft die angegebene Callback-Funktion einmal für jeden Bereich im Hervorhebungsobjekt auf, und zwar in der Reihenfolge, in der die Bereiche hinzugefügt wurden.
Highlight.has()-
Gibt einen booleschen Wert zurück, der angibt, ob ein Bereich im Hervorhebungsobjekt vorhanden ist.
Highlight.keys()-
Ein Alias für
Highlight.values(). Highlight.values()-
Gibt ein neues Iterator-Objekt zurück, das die Bereiche im Hervorhebungsobjekt in der Reihenfolge liefert, in der sie hinzugefügt wurden.
Beispiele
Das folgende Beispiel zeigt, wie bestimmte Teile eines Textblocks hervorgehoben werden können.
<p class="foo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
sapiente non eum facere? Nam rem hic culpa, ipsa rerum ab itaque consectetur
molestiae dolores vitae! Quo ex explicabo tempore? Tenetur.</p>
Dieser JavaScript-Code erstellt Bereiche, erzeugt dafür ein neues Highlight-Objekt und registriert es, damit es auf der Seite gestaltet werden kann:
const parentNode = document.querySelector(".foo");
const textNode = parentNode.firstChild;
// Create a couple of ranges.
const range1 = new Range();
range1.setStart(textNode, 6);
range1.setEnd(textNode, 21);
const range2 = new Range();
range2.setStart(textNode, 57);
range2.setEnd(textNode, 71);
// 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);
Der folgende CSS-Codeausschnitt zeigt, wie die registrierte benutzerdefinierte Hervorhebung mit dem Pseudoelement ::highlight gestaltet wird:
::highlight(my-custom-highlight) {
background-color: peachpuff;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Custom Highlight API Module Level 1 # highlight |