Signatur
Beschreibung
Die Methode getCounterValue() gehört zur alten CSS-Objektmodell-Schnittstelle CSSPrimitiveValue aus DOM Level 2 Style. Sie liefert ein Counter-Objekt, wenn der Primitivwert ein CSS-Zähler ist, also z. B. counter(abschnitt) oder counters(punkt, ".", lower-roman) innerhalb der Eigenschaft content.
Das zurückgegebene Counter-Objekt hat drei schreibgeschützte Eigenschaften: identifier (Name des Zählers), listStyle (Zählweise, z. B. decimal oder lower-roman) und separator (Trennzeichen bei counters(), sonst leerer String). Den aktuellen Zahlenwert eines Zählers bekommst du damit nicht. Die Methode beschreibt nur, wie der Zähler deklariert ist.
An einen CSSPrimitiveValue kam man früher meist über getComputedStyle(el).getPropertyCSSValue() oder CSSStyleDeclaration.getPropertyCSSValue(). Vor dem Aufruf sollte man primitiveType mit der Konstante CSSPrimitiveValue.CSS_COUNTER (Wert 23) vergleichen. Passt der Typ nicht, wirft die Methode eine DOMException.
Die ganze Schnittstelle ist veraltet. In neuem Code arbeitest du besser mit getPropertyValue() (liefert einen String) oder mit dem CSS Typed OM (element.computedStyleMap()).
Rückgabewert
Counter-Objekt mit den Eigenschaften identifier, listStyle und separator. Ist der Wert kein Zähler, wird eine DOMException vom Typ InvalidAccessError geworfen.Beispiele
Zählerdeklaration aus content auslesen (mit Funktionsprüfung)
// CSS: h2::before { content: counter(kapitel, upper-roman) ". "; }
const h2 = document.querySelector('h2');
const style = getComputedStyle(h2, '::before');
if (typeof style.getPropertyCSSValue !== 'function') {
console.log('Altes CSSOM wird nicht unterstützt');
} else {
const list = style.getPropertyCSSValue('content'); // CSSValueList
for (let i = 0; i < list.length; i++) {
const value = list.item(i);
if (value.primitiveType === CSSPrimitiveValue.CSS_COUNTER) {
const counter = value.getCounterValue();
console.log(counter.identifier, counter.listStyle, JSON.stringify(counter.separator));
}
}
}Typprüfung vor dem Aufruf mit Fehlerbehandlung
const readCounter = (primitiveValue) => {
try {
const { identifier, listStyle, separator } = primitiveValue.getCounterValue();
return { identifier, listStyle, separator };
} catch (err) {
// InvalidAccessError, wenn der Wert kein CSS_COUNTER ist
console.warn('Kein Zählerwert:', err.name);
return null;
}
};
// Nutzung, z. B. mit einem Eintrag aus getPropertyCSSValue('content'):
// const info = readCounter(list.item(0));Moderne Alternative: content als String auswerten
// CSS: li::before { content: counters(punkt, ".", decimal) " "; }
const li = document.querySelector('li');
const content = getComputedStyle(li, '::before').getPropertyValue('content');
const match = content.match(/counters?\(\s*([\w-]+)\s*(?:,\s*"([^"]*)")?\s*(?:,\s*([\w-]+))?\s*\)/);
if (match) {
const [, identifier, separator = '', listStyle = 'decimal'] = match;
console.log({ identifier, separator, listStyle });
}// Wichtig · Fallstricke
- Veraltet:
CSSPrimitiveValue,CSSValue,CounterundgetPropertyCSSValue()stammen aus DOM Level 2 Style und wurden aus den Spezifikationen entfernt. Firefox hat die Unterstützung entfernt (ab Version 62), Chromium-basierte Browser ebenfalls. In aktuellen Browsern ist die Methode daher meist nicht verfügbar. Prüfe das immer vorher per Funktionsprüfung. - Ist der Wert kein Zähler, wirft die Methode eine
DOMException(InvalidAccessError). Prüfe deshalb vorherprimitiveType === CSSPrimitiveValue.CSS_COUNTER. - Die Methode liefert nur die Deklaration des Zählers (Name, Zählweise, Trennzeichen), nicht seinen aktuellen Zahlenwert. Den gerenderten Zählerstand kannst du per Skript grundsätzlich nicht auslesen. Wenn du ihn brauchst, zähle die Elemente selbst im DOM.
- Zähler stehen meist in Pseudo-Elementen. Übergib deshalb
'::before'bzw.'::after'als zweites Argument angetComputedStyle(). - Für neuen Code:
getPropertyValue()oder das CSS Typed OM (computedStyleMap()). Das Typed OM stellt Zählerwerte aktuell allerdings nur alsCSSStyleValuedar, den du als String auswerten musst.