Highlight

Limited availability

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

Die Highlight-Schnittstelle der CSS Custom Highlight API wird verwendet, um eine Sammlung von Range-Instanzen darzustellen, die mithilfe der API gestylt werden sollen.

Um beliebige Bereiche auf einer Seite zu stylen, instanziieren Sie ein neues Highlight-Objekt, fügen ihm 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 enthalten kann.

Konstruktor

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

Instanz-Eigenschaften

Die Highlight-Schnittstelle erbt keine Eigenschaften.

Highlight.priority: Eine Zahl, die die Priorität dieses Highlight-Objekts angibt. Wenn mehrere Highlights überlappen, verwendet der Browser diese Priorität, um zu entscheiden, wie die überlappenden Teile gestylt werden.
Highlight.size Nur lesbar: Gibt die Anzahl der Bereiche im Highlight-Objekt zurück.
Highlight.type: Ein enumerierter String, der verwendet wird, um die semantische Bedeutung des Highlights zu spezifizieren. Dies ermöglicht es unterstützender Technologie, diese Bedeutung einzuschließen, wenn das Highlight den Benutzern offenbart wird.

Instanz-Methoden

Die Highlight-Schnittstelle 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ügereihenfolge enthält.
Highlight.forEach(): Ruft den angegebenen Rückruf einmal für jeden Bereich im Highlight-Objekt in Einfügereihenfolge auf.
Highlight.has(): Gibt einen Boolean 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ügereihenfolge liefert.

Beispiele

Das folgende Beispiel demonstriert, wie man Bereiche erstellt, ein neues Highlight-Objekt für sie instanziiert und es registriert, damit es auf der Seite gestylt wird:

const parentNode = document.getElementById("foo");

// Create a couple of ranges.
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

// 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-Codebeispiel zeigt, wie man das registrierte benutzerdefinierte Highlight mithilfe des ::highlight-Pseudo-Elements stylt:

css

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

Spezifikationen

Specification
CSS Custom Highlight API Module Level 1 # highlight

Browser-Kompatibilität

BCD tables only load in the browser