Hervorhebung

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das Highlight-Interface der CSS Custom Highlight API wird verwendet, um eine Sammlung von Range-Instanzen zu repräsentieren, die mithilfe der API gestylt werden sollen.

Um beliebige Bereiche auf einer Seite zu gestalten, erstellen Sie ein neues Highlight-Objekt, fügen Sie ein oder mehrere Range-Objekte hinzu und registrieren Sie es mit dem HighlightRegistry.

Eine Highlight-Instanz ist ein Set-ähnliches Objekt, das ein oder mehrere Range-Objekte enthalten kann.

Konstruktor

Highlight(): Gibt ein neu erstelltes Highlight-Objekt zurück.

Instanzeigenschaften

Das Highlight-Interface erbt keine Eigenschaften.

Highlight.priority: Eine Zahl, die die Priorität dieses Highlight-Objekts angibt. Wenn mehrere Hervorhebungen überlappen, verwendet der Browser diese Priorität, um zu entscheiden, wie die überlappenden Teile gestylt werden.
Highlight.size Schreibgeschützt: Gibt die Anzahl der Bereiche im Highlight-Objekt zurück.
Highlight.type: Ein enumerierter String, der verwendet wird, um die semantische Bedeutung der Hervorhebung anzugeben. Dies ermöglicht es unterstützenden Technologien, diese Bedeutung einzubeziehen, wenn die Hervorhebung Benutzern präsentiert wird.

Instanzmethoden

Das Highlight-Interface 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 jeden Bereich im Hervorhebungsobjekt in Einfügereihenfolge enthält.
Highlight.forEach(): Ruft die angegebene Rückruffunktion einmal für jeden Bereich im Hervorhebungsobjekt in Einfügereihenfolge auf.
Highlight.has(): Gibt einen Booleschen Wert zurück, der angibt, ob ein Bereich im Hervorhebungsobjekt 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 Hervorhebungsobjekt in Einfügereihenfolge 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 gestylt 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 das registrierte benutzerdefinierte Highlight mit Hilfe des ::highlight Pseudoelements gestylt werden kann:

css

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

Ergebnis

Spezifikationen

Specification
CSS Custom Highlight API Module Level 1 # highlight