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.size Schreibgeschü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.

html

<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:

css

::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

Ergebnis

Spezifikationen

Specification
CSS Custom Highlight API Module Level 1 # highlight