CSS: highlights Eigenschaft
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.
Die statische, schreibgeschützte highlights Eigenschaft des CSS Interface bietet Zugriff auf das HighlightRegistry, das verwendet wird, um beliebige Textranges mit der CSS Custom Highlight API zu gestalten.
Wert
Das HighlightRegistry Objekt.
Beispiele
Das folgende Beispiel zeigt, wie mehrere Textranges erstellt werden, dann ein Highlight-Objekt für diese erstellt, dieses Highlight im HighlightRegistry registriert und schließlich die Textranges mit dem ::highlight() Pseudo-Element gestaltet werden.
js
const parentNode = document.getElementById("foo");
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);
const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);
const myCustomHighlight = new Highlight(range1, range2);
CSS.highlights.set("my-custom-highlight", myCustomHighlight);
css
::highlight(my-custom-highlight) {
background-color: yellow;
color: black;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Custom Highlight API Module Level 1 # dom-css-highlights |