CSSCounterStyleRule.negative — Eigenschaft · JavaScript-Referenz

Signatur

CSSCounterStyleRule.negative

Beschreibung

Die Eigenschaft negative der Schnittstelle CSSCounterStyleRule bildet den negative-Deskriptor einer @counter-style-Regel im CSS-Objektmodell (CSSOM) ab. Der Deskriptor legt fest, wie negative Zählerwerte dargestellt werden. Er besteht aus einem oder zwei Symbolen: Das erste steht vor der Zahl, das optionale zweite danach. Mit negative: "(" ")" wird zum Beispiel aus -5 die in der Buchhaltung übliche Schreibweise (5).

Beim Lesen erhältst du den serialisierten Wert als Zeichenkette, etwa '"-"' oder '"(" ")"'. Die Anführungszeichen der CSS-Strings gehören dabei zum Wert. Steht der Deskriptor nicht in der Regel, ist der Wert eine leere Zeichenkette. Der Browser verwendet dann den Standard "\2D" (Bindestrich-Minus).

Beim Schreiben zerlegt der Browser die Zeichenkette als CSS-Deskriptorwert. Ist die Syntax gültig, wird die Regel sofort aktualisiert und alle Listen und Zähler, die diesen Zählerstil nutzen, werden neu dargestellt. Ist sie ungültig, wird die Zuweisung stillschweigend ignoriert. Damit kannst du die Darstellung negativer Werte zur Laufzeit ändern, etwa beim Umschalten von Sprache oder Formatierung, ohne ein Stylesheet neu zu laden.

Parameter

Name	Typ	Default	Beschreibung
$wert (beim Setzen)	string		Ein gültiger CSS-Wert für den `negative`-Deskriptor: ein oder zwei `<symbol>`-Werte, also Strings, Bilder oder Bezeichner, z. B. `'"-"'` oder `'"(" ")"'`. Ungültige Werte werden ignoriert.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Wert des negative-Deskriptors, z. B. '"(" ")"'. Ist der Deskriptor nicht angegeben, ist es eine leere Zeichenkette ''.

Beispiele

negative-Deskriptor auslesen (Buchhaltungsformat)

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

const rule = sheet.cssRules[0];
console.log(rule instanceof CSSCounterStyleRule);
console.log(rule.name);
console.log(rule.negative);

true buchhaltung "(" ")"

Wert zur Laufzeit ändern und ungültige Zuweisung erkennen

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @counter-style saldo {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  }
`);
const rule = sheet.cssRules[0];

console.log(JSON.stringify(rule.negative)); // nicht gesetzt

rule.negative = '"−"'; // echtes Minuszeichen U+2212
console.log(rule.negative);

rule.negative = '"a" "b" "c"'; // drei Symbole: ungültig
console.log(rule.negative); // unverändert

"" "−" "−"

Regel im Dokument finden und mit einem Schalter umstellen

// Im HTML vorausgesetzt:
// <style>@counter-style konto { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; }
//        ol.konten { list-style: konto; }</style>
// <ol class="konten" reversed start="1"><li>A</li><li>B</li><li>C</li></ol>
// <input type="checkbox" id="klammern">

const findeZaehlerstil = (name) => {
  for (const sheet of document.styleSheets) {
    for (const rule of sheet.cssRules) {
      if (rule instanceof CSSCounterStyleRule && rule.name === name) return rule;
    }
  }
  return null;
};

const konto = findeZaehlerstil('konto');
document.querySelector('#klammern').addEventListener('change', (e) => {
  konto.negative = e.target.checked ? '"(" ")"' : '"-"';
  console.log('negative =', konto.negative);
});

negative = "(" ")"

// Wichtig · Fallstricke

Nur bei bestimmten Systemen wirksam: negative gilt nur für die Systeme symbolic, alphabetic, numeric und additive. Bei cyclic und fixed hat der Deskriptor keine Wirkung.
Standardbereich beachten: Bei alphabetic und symbolic beginnt der Standardbereich (range) bei 1, bei additive bei 0. Negative Werte liegen damit außerhalb des Bereichs, und der Browser nimmt den fallback-Stil. Damit negative dort greift, musst du range ausdrücklich erweitern, z. B. range: infinite infinite.
Die Anführungszeichen gehören zum Wert: Der Wert muss gültige CSS-Syntax sein. rule.negative = '-' ist kein String-Symbol, sondern ein ungültiger Bezeichner und wird ignoriert. Richtig ist '\"-\"'.
Keine Fehlermeldung: Ungültige Zuweisungen werfen keine Ausnahme. Wenn du sicher sein willst, lies den Wert danach noch einmal aus und vergleiche.
Serialisierung: Die genaue Schreibweise (Leerzeichen, Anführungszeichen, Escape-Sequenzen) kann sich zwischen Browsern leicht unterscheiden. Vergleiche daher nicht zu streng auf exakte Zeichenketten.
Kompatibilität: CSSCounterStyleRule gibt es in Firefox seit Version 33, in Chrome/Edge seit Version 91 und in Safari seit Version 17. In älteren Browsern fehlt die Schnittstelle. Prüfe daher vorher mit 'CSSCounterStyleRule' in window.
Cross-Origin-Stylesheets: Auf cssRules fremder Stylesheets ohne CORS-Freigabe zuzugreifen, löst einen SecurityError aus. Beim Durchlaufen von document.styleSheets solltest du das mit try/catch abfangen.

Siehe auch

CSSCounterStyleRule.name CSSCounterStyleRule.range CSSCounterStyleRule.pad CSSCounterStyleRule.prefix CSSCounterStyleRule.speakAs CSSContainerRule.conditions CSSCounterStyleRule.additiveSymbols