Highlight
Baseline
2025
Neu verfügbar
Seit June 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.
Das Highlight-Interface der CSS Custom Highlight API wird verwendet, um eine Sammlung von Range-Instanzen zu repräsentieren, die mit der API gestylt werden sollen.
Um beliebige Bereiche einer Seite zu stylen, 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 enthalten 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 Hervorhebungen überschneiden, verwendet der Browser diese Priorität, um zu entscheiden, wie die überlappenden Teile gestylt werden. Highlight.sizeSchreibgeschü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 assistiven Technologien, diese Bedeutung beim Bereitstellen der Hervorhebung für Benutzer einzuschließen.
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 der Einfügereihenfolge enthält.
Highlight.forEach()-
Ruft den angegebenen Rückruf einmal für jeden Bereich im Highlight-Objekt in der Einfügereihenfolge 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 der Einfügereihenfolge liefert.
Beispiele
Das folgende Beispiel demonstriert, wie spezifische 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 Ranges, 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-Codebeispiel zeigt, wie das registrierte benutzerdefinierte Highlight mithilfe des ::highlight-Pseudoelements gestylt wird:
::highlight(my-custom-highlight) {
background-color: peachpuff;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Custom Highlight API Module Level 1 # highlight |