CSSCounterStyleRule.prefix — Eigenschaft · JavaScript-Referenz

Signatur

CSSCounterStyleRule.prefix

Beschreibung

Die Eigenschaft prefix der Schnittstelle CSSCounterStyleRule gibt den prefix-Deskriptor einer @counter-style-Regel als String zurück. Dieser Deskriptor legt fest, welches Symbol vor der Zählerdarstellung einer Listenmarkierung erscheint, zum Beispiel "(" bei der Aufzählung (1), (2), (3).

Da die Eigenschaft beschreibbar ist, kann man das Präfix eines eigenen Zählerstils zur Laufzeit ändern, ohne das Stylesheet neu zu schreiben. Alle Elemente, die diesen Zählerstil über list-style-type oder counter() verwenden, werden danach automatisch neu gezeichnet.

Wurde der Deskriptor in der Regel nicht angegeben, liefert die Eigenschaft einen leeren String "". Der Standardwert laut CSS ist ebenfalls ein leerer String. Beim Setzen muss der Wert ein gültiges CSS-<symbol> sein, also ein String in Anführungszeichen (z. B. '"§ "'), ein Bezeichner oder ein Bild. Ungültige Werte werden stillschweigend verworfen.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: neuer Wert des `prefix`-Deskriptors als CSS-`<symbol>`, z. B. `'"("'`. Strings müssen die CSS-Anführungszeichen mit enthalten.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Wert des prefix-Deskriptors, z. B. '"("', oder "", wenn der Deskriptor nicht gesetzt ist.

Beispiele

Präfix einer @counter-style-Regel auslesen

// CSS: @counter-style klammern { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: "("; suffix: ") "; }
const style = document.createElement('style');
style.textContent = `
  @counter-style klammern {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    prefix: "(";
    suffix: ") ";
  }
  ol { list-style-type: klammern; }
`;
document.head.append(style);

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

console.log(rule.prefix);

"("

Präfix zur Laufzeit ändern

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @counter-style paragraf {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: " ";
  }
  ol.gesetz { list-style-type: paragraf; }
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rule = sheet.cssRules[0];
console.log(JSON.stringify(rule.prefix)); // nicht gesetzt

// Wichtig: CSS-Anführungszeichen mitgeben
rule.prefix = '"§ "';
console.log(rule.prefix);

"" "§ "

Ungültigen Wert erkennen

const sheet = new CSSStyleSheet();
sheet.replaceSync('@counter-style demo { system: cyclic; symbols: "•"; prefix: "["; }');
const rule = sheet.cssRules[0];

const setPrefix = (r, value) => {
  const vorher = r.prefix;
  r.prefix = value;
  return r.prefix !== vorher || r.prefix === value;
};

console.log(setPrefix(rule, '"→ "')); // gültiger String
console.log(setPrefix(rule, '1px'));  // Länge ist kein <symbol>
console.log(rule.prefix);

true false "→ "

// Wichtig · Fallstricke

Anführungszeichen nicht vergessen: rule.prefix = '('; ist kein gültiger String im Sinne von CSS und wird ignoriert. Richtig ist rule.prefix = '"("';.
Ungültige Werte lösen keinen Fehler aus. Der alte Wert bleibt einfach bestehen. Prüfe den Wert nach dem Setzen, wenn es darauf ankommt.
Das Präfix gilt nur für Marker und counter()-Ausgaben, die diesen Zählerstil verwenden. Vordefinierte Stile wie decimal lassen sich darüber nicht ändern. Dafür braucht es eine eigene Regel mit extends decimal.
Auf Regeln aus fremden Stylesheets (Cross-Origin ohne CORS) ist kein Zugriff möglich: sheet.cssRules wirft dann einen SecurityError.
Browser-Unterstützung: Firefox hat die Eigenschaft seit Version 33, Chrome/Edge seit 91 und Safari erst seit 17. Ältere Safari-Versionen kennen CSSCounterStyleRule nicht, deshalb vorher mit 'CSSCounterStyleRule' in window prüfen.

Siehe auch

CSSCounterStyleRule.negative CSSCounterStyleRule.suffix CSSCounterStyleRule.pad CSSCounterStyleRule.range CSSCounterStyleRule.name