Highlight
Baseline
2025
Newly available
Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Das Highlight-Interface der CSS Custom Highlight API wird verwendet, um eine Sammlung von Range-Instanzen darzustellen, die mit der API gestaltet werden sollen.
Um beliebige Bereiche auf einer Seite zu gestalten, instanziieren Sie ein neues Highlight-Objekt, fügen Sie ein oder mehrere Range-Objekte hinzu und registrieren Sie es mithilfe des HighlightRegistry.
Eine Highlight-Instanz ist ein Set-ähnliches Objekt, das ein oder mehrere Range-Objekte halten kann.
Konstruktor
Highlight()-
Gibt ein neu erstelltes
Highlight-Objekt zurück.
Instanz-Eigenschaften
Das Highlight-Interface erbt keine Eigenschaften.
Highlight.priority-
Eine Zahl, die die Priorität dieses
Highlight-Objekts angibt. Wenn sich mehrere Highlights überlappen, verwendet der Browser diese Priorität, um zu entscheiden, wie die überlappenden Teile gestaltet werden. Highlight.sizeSchreibgeschützt-
Gibt die Anzahl der Bereiche im
Highlight-Objekt zurück. Highlight.type-
Eine enumerierte
String, die verwendet wird, um die semantische Bedeutung des Highlights anzugeben. Dies ermöglicht es unterstützenden Technologien, diese Bedeutung einzubeziehen, wenn das Highlight Benutzern zugänglich gemacht wird.
Instanz-Methoden
Das Highlight-Interface erbt keine Methoden.
Highlight.add()-
Fügt diesem Highlight einen neuen Bereich hinzu.
Highlight.clear()-
Entfernt alle Bereiche aus diesem Highlight.
Highlight.delete()-
Entfernt einen Bereich aus diesem Highlight.
Highlight.entries()-
Gibt ein neues Iterator-Objekt zurück, das jeden Bereich im Highlight-Objekt in Einfüge-Reihenfolge enthält.
Highlight.forEach()-
Ruft die gegebene Callback-Funktion einmal für jeden Bereich im Highlight-Objekt in Einfüge-Reihenfolge auf.
Highlight.has()-
Gibt einen booleschen Wert zurück, der angibt, ob ein Bereich im Highlight-Objekt vorhanden ist oder nicht.
Highlight.keys()-
Ein Alias für
Highlight.values(). Highlight.values()-
Gibt ein neues Iterator-Objekt zurück, das die Bereiche im Highlight-Objekt in Einfüge-Reihenfolge liefert.
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, instanziiert ein neues Highlight-Objekt für sie und registriert es, um auf der Seite gestaltet zu werden:
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);
Das folgende CSS-Code-Snippet zeigt, wie man das registrierte benutzerdefinierte Highlight mithilfe des ::highlight-Pseudo-Elements gestaltet:
::highlight(my-custom-highlight) {
background-color: peachpuff;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # highlight |
Browser-Kompatibilität
Loading…