HighlightRegistry.size — Eigenschaft · JavaScript-Referenz

Signatur

get HighlightRegistry.prototype.size

Beschreibung

HighlightRegistry.size gehört zur CSS Custom Highlight API. Die Registry erreicht man über CSS.highlights. Sie verhält sich wie ein Map: Jeder Eintrag verbindet einen Namen (string) mit einem Highlight-Objekt, das wiederum eine Menge von Range-Objekten enthält. size liefert die Anzahl dieser Name-Highlight-Paare.

Gebraucht wird die Eigenschaft zum Beispiel, um herauszufinden, ob überhaupt Hervorhebungen aktiv sind (etwa um einen „Markierungen entfernen“-Button ein- oder auszublenden), zum Debuggen oder um zu prüfen, ob Aufräumlogik wie clear() oder delete() gegriffen hat.

Wichtig: size zählt die registrierten Highlights, nicht die einzelnen Textbereiche. Wie viele Range-Objekte ein einzelnes Highlight enthält, verrät dessen eigene Eigenschaft Highlight.prototype.size.

Rückgabewert

Typ

number

Beschreibung

Eine ganze Zahl ≥ 0: die Anzahl der aktuell in der Registry gespeicherten Highlight-Einträge.

Beispiele

Anzahl registrierter Highlights abfragen

const absatz = document.querySelector('p');

// Bereich über den ersten Textknoten des Absatzes
const range = new Range();
range.setStart(absatz.firstChild, 0);
range.setEnd(absatz.firstChild, 5);

console.log(CSS.highlights.size); // noch leer

CSS.highlights.set('suche', new Highlight(range));
CSS.highlights.set('fehler', new Highlight());

console.log(CSS.highlights.size);

0 2

Registry-Größe vs. Anzahl der Ranges

const text = document.body.firstChild; // angenommen ein Textknoten

const r1 = new Range();
r1.setStart(text, 0); r1.setEnd(text, 3);
const r2 = new Range();
r2.setStart(text, 4); r2.setEnd(text, 7);

const treffer = new Highlight(r1, r2);
CSS.highlights.set('treffer', treffer);

console.log('Highlights:', CSS.highlights.size); // Einträge der Registry
console.log('Ranges:', treffer.size);           // Ranges im Highlight

Highlights: 1 Ranges: 2

Button abhängig von aktiven Markierungen anzeigen

const button = document.querySelector('#markierungen-entfernen');

const aktualisiereButton = () => {
  button.hidden = CSS.highlights.size === 0;
};

button.addEventListener('click', () => {
  CSS.highlights.clear();
  aktualisiereButton();
  console.log('Verbleibend:', CSS.highlights.size);
});

aktualisiereButton();

Verbleibend: 0

// Wichtig · Fallstricke

Nur lesbar: Wenn man size etwas zuweist, passiert nichts (im Strict Mode gibt es einen TypeError). Die Größe ändert sich nur über set(), delete() und clear().
Nicht verwechseln: CSS.highlights.size zählt die benannten Highlights. Highlight.prototype.size zählt die Ranges innerhalb eines Highlights.
Wird set() mit einem Namen aufgerufen, der schon existiert, wird der Eintrag ersetzt. size steigt dann nicht.
Kompatibilität: Firefox unterstützt die Custom Highlight API erst seit Version 140. Vorher sicher prüfen, zum Beispiel mit if ('highlights' in CSS) { … }.
Die Registry gilt pro Dokument. Iframes haben jeweils ihr eigenes CSS.highlights.

Siehe auch

Highlight Highlight.size Range Highlight.priority Highlight.type