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 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
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # highlight |