CSSCounterStyleRule.additiveSymbols — Eigenschaft · JavaScript-Referenz

Signatur

CSSCounterStyleRule.additiveSymbols

Beschreibung

Die Eigenschaft additiveSymbols der Schnittstelle CSSCounterStyleRule gibt den Wert des Deskriptors additive-symbols einer @counter-style-Regel als String zurück. Man kann ihr auch einen neuen Wert zuweisen und so die Regel zur Laufzeit ändern.

Der Deskriptor additive-symbols wird nur beim Zählsystem system: additive ausgewertet. Er enthält eine kommagetrennte Liste von Paaren aus Gewicht und Symbol, zum Beispiel 1000 M, 900 CM, 500 D. Die Gewichte müssen absteigend sortiert und nicht negativ sein. Der Browser setzt jede Zahl zusammen, indem er so oft wie möglich das Symbol mit dem größten passenden Gewicht verwendet. So lassen sich etwa römische Zahlen darstellen.

In der Praxis braucht man die Eigenschaft vor allem, wenn eigene Zählstile per JavaScript untersucht oder angepasst werden sollen, etwa bei Theming, Lokalisierung oder in Werkzeugen zur Stylesheet-Analyse. An die Regel kommt man über document.styleSheets und cssRules. Dort filtert man nach instanceof CSSCounterStyleRule.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: neuer Wert im Format von `additive-symbols`, z. B. `"10 X, 5 V, 1 I"`. Ungültige Werte ignoriert der Browser ohne Fehlermeldung.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Wert des Deskriptors additive-symbols. Ist der Deskriptor nicht gesetzt, ist es ein leerer String "".

Beispiele

Wert eines eigenen Zählstils auslesen

// CSS: @counter-style roman-simple { system: additive; additive-symbols: 10 X, 5 V, 4 IV, 1 I; }
const style = document.createElement('style');
style.textContent = `@counter-style roman-simple {
  system: additive;
  additive-symbols: 10 X, 5 V, 4 IV, 1 I;
}`;
document.head.append(style);

const rule = [...style.sheet.cssRules]
  .find((r) => r instanceof CSSCounterStyleRule && r.name === 'roman-simple');

console.log(rule.additiveSymbols);

10 X, 5 V, 4 IV, 1 I

Symbole zur Laufzeit austauschen

const style = document.createElement('style');
style.textContent = `@counter-style dots {
  system: additive;
  additive-symbols: 5 '★', 1 '•';
}
ol { list-style: dots; }`;
document.head.append(style);

const rule = style.sheet.cssRules[0];
// Anderes Symbol-Set, z. B. für ein alternatives Theme
rule.additiveSymbols = "5 '■', 1 '□'";
console.log(rule.additiveSymbols);

5 "■", 1 "□"

Alle additiven Zählstile im Dokument auflisten

const additiveRules = [...document.styleSheets]
  .flatMap((sheet) => {
    try {
      return [...sheet.cssRules];
    } catch {
      return []; // fremde Stylesheets ohne CORS-Freigabe
    }
  })
  .filter((r) => r instanceof CSSCounterStyleRule && r.system === 'additive');

for (const r of additiveRules) {
  console.log(`${r.name}: ${r.additiveSymbols}`);
}

roman-simple: 10 X, 5 V, 4 IV, 1 I

// Wichtig · Fallstricke

Der Deskriptor wirkt nur bei system: additive. Bei anderen Systemen wird er zwar gespeichert und zurückgegeben, hat aber keine Auswirkung.
Ungültige Zuweisungen werfen keinen Fehler, der alte Wert bleibt einfach bestehen. Das passiert etwa bei aufsteigenden oder negativen Gewichten oder bei fehlenden Symbolen. Prüfe deshalb nach dem Setzen den Wert, wenn es darauf ankommt.
Die Serialisierung kann vom Quelltext abweichen. Zum Beispiel können einfache Anführungszeichen zu doppelten werden.
Zu cssRules fremder Stylesheets ohne CORS-Freigabe gibt es keinen Zugriff, es wird ein SecurityError geworfen.
Kompatibilität: Chrome/Edge ab 91, Firefox ab 33, Safari erst ab 17. In älteren Safari-Versionen gibt es CSSCounterStyleRule nicht. Vorher mit 'CSSCounterStyleRule' in window prüfen.

Siehe auch

CSSCounterStyleRule.symbols CSSCounterStyleRule.negative CSSCounterStyleRule.system CSSCounterStyleRule.speakAs CSSCounterStyleRule.fallback