CSSKeywordValue.value — Eigenschaft · JavaScript-Referenz

Signatur

CSSKeywordValue.value

Beschreibung

Die Eigenschaft value gehört zum Interface CSSKeywordValue aus dem CSS Typed Object Model (Houdini). Ein CSSKeywordValue steht für einen CSS-Wert, der nur aus einem Schlüsselwort besteht, etwa auto, block, none, center oder die globalen Schlüsselwörter inherit, initial, unset und revert. Über value kommt man als einfache Zeichenkette an dieses Schlüsselwort heran.

Die Eigenschaft lässt sich lesen und schreiben. Beim Lesen erhält man das Schlüsselwort ohne Anführungszeichen und ohne weitere Formatierung. Beim Schreiben wird das Schlüsselwort des Objekts ersetzt. Die Änderung wirkt sich aber erst dann auf ein Element aus, wenn man das Objekt wieder mit element.attributeStyleMap.set() zuweist, denn das Objekt ist nicht „live“ mit dem Stil verbunden.

In der Praxis braucht man value vor allem, um Werte aus element.computedStyleMap() oder element.attributeStyleMap auszuwerten. So kann man zum Beispiel prüfen, ob display gerade none ist, ohne Zeichenketten parsen zu müssen. Mit instanceof CSSKeywordValue unterscheidet man dabei Schlüsselwörter von numerischen Werten (CSSUnitValue) oder anderen Typen.

Rückgabewert

Typ

string

Beschreibung

Das CSS-Schlüsselwort als Zeichenkette, z. B. "auto". Beim Setzen wird jede Zeichenkette akzeptiert, eine leere Zeichenkette löst jedoch einen TypeError aus.

Beispiele

Schlüsselwort erzeugen, lesen und ändern

// Neues Keyword-Objekt anlegen
const keyword = new CSSKeywordValue('auto');
console.log(keyword.value);      // Schlüsselwort lesen

// Schlüsselwort ersetzen
keyword.value = 'inherit';
console.log(keyword.value);
console.log(keyword.toString()); // Serialisierung als CSS-Text

auto inherit inherit

Berechneten display-Wert eines Elements prüfen

const panel = document.querySelector('#panel');
const display = panel.computedStyleMap().get('display');

if (display instanceof CSSKeywordValue && display.value === 'none') {
  console.log('Panel ist ausgeblendet');
} else {
  console.log(`Panel sichtbar (display: ${display.value})`);
}

Panel sichtbar (display: block)

Keyword ändern und wieder zuweisen

const box = document.querySelector('.box');
box.attributeStyleMap.set('overflow', new CSSKeywordValue('hidden'));

const overflow = box.attributeStyleMap.get('overflow');
overflow.value = 'auto';

// Ohne erneutes set() ändert sich der Stil NICHT
console.log(box.style.overflow);

box.attributeStyleMap.set('overflow', overflow);
console.log(box.style.overflow);

hidden auto

Keyword-Werte von numerischen Werten unterscheiden

const el = document.querySelector('img');
el.attributeStyleMap.set('width', 'auto');
el.attributeStyleMap.set('height', CSS.px(200));

for (const prop of ['width', 'height']) {
  const v = el.attributeStyleMap.get(prop);
  const text = v instanceof CSSKeywordValue
    ? `Schlüsselwort "${v.value}"`
    : `Zahl ${v.value}${v.unit}`;
  console.log(`${prop}: ${text}`);
}

width: Schlüsselwort "auto" height: Zahl 200px

// Wichtig · Fallstricke

Browser-Kompatibilität: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome, Edge, Opera) ab Version 66 und in Safari ab 16.4. Firefox unterstützt es nicht. Vorher per Feature-Erkennung prüfen, z. B. mit if ('CSSKeywordValue' in window), und sonst auf getComputedStyle() ausweichen.
Wird value auf eine leere Zeichenkette gesetzt, löst das einen TypeError aus. Andere Zeichenketten werden dagegen nicht geprüft: Ein ungültiges Schlüsselwort wie 'foo' fällt erst auf, wenn man es mit attributeStyleMap.set() einer Eigenschaft zuweist.
Das Objekt ist nicht live: Eine Änderung an value wirkt sich erst nach erneutem set() auf das Element aus.
Nicht jeder Wert aus einer StyleMap ist ein CSSKeywordValue. Numerische Werte haben ebenfalls eine Eigenschaft value, dort aber vom Typ number. Deshalb vorher mit instanceof prüfen.
Wie Schlüsselwörter geschrieben werden (z. B. Groß- oder Kleinschreibung), kann sich zwischen berechneten und direkt gesetzten Werten unterscheiden. Für Vergleiche am besten Kleinbuchstaben verwenden.

Siehe auch

CSSUnitValue.value CSSMathNegate.value CSSKeyframeRule.style CSSKeyframesRule.name CSSMathClamp.value