CSS: highlights Eigenschaft
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.
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
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # dom-css-highlights |