CSS: highlights Static-Eigenschaft

Limited availability

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

Die statische, schreibgeschützte highlights-Eigenschaft des CSS-Interfaces ermöglicht den Zugriff auf das HighlightRegistry, das verwendet wird, um beliebige Textbereiche mit der CSS Custom Highlight API zu stylen.

Wert

Das HighlightRegistry-Objekt.

Beispiele

Das folgende Beispiel zeigt, wie mehrere Textbereiche erstellt, dann ein Highlight-Objekt für diese Bereiche erstellt, dieses Highlight im HighlightRegistry registriert und schließlich die Textbereiche mit dem ::highlight()-Pseudo-Element gestylt 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch