new CSSKeywordValue() — Methode · JavaScript-Referenz

Signatur

new CSSKeywordValue(value)

Beschreibung

Der Konstruktor CSSKeywordValue() gehört zum CSS Typed Object Model (Houdini). Damit stellst du CSS-Schlüsselwörter und andere Bezeichner (z. B. block, center, initial) als typisiertes Objekt dar, statt mit reinen Zeichenketten zu arbeiten. Das Objekt erbt von CSSStyleValue und hat eine einzige Eigenschaft: value, die das Schlüsselwort als String enthält und sich auch nachträglich ändern lässt.

Typischerweise übergibst du so ein Objekt an element.attributeStyleMap.set(). Umgekehrt liefert computedStyleMap().get() für Eigenschaften mit Schlüsselwort-Wert eine CSSKeywordValue-Instanz zurück. So kannst du Schlüsselwörter sauber von numerischen Werten (CSSUnitValue) unterscheiden, etwa mit instanceof.

Der Konstruktor prüft nicht, ob das Schlüsselwort für eine bestimmte CSS-Eigenschaft gültig ist. Er prüft nur, ob überhaupt ein nicht leerer Bezeichner übergeben wurde. Ob der Wert passt, stellt sich erst beim Setzen auf eine Eigenschaft heraus.

Parameter

Name	Typ	Default	Beschreibung
$value Pflicht	string		Das Schlüsselwort bzw. der Bezeichner, z. B. `'auto'`, `'none'` oder `'inherit'`. Eine leere Zeichenkette löst einen `TypeError` aus.

Rückgabewert

Typ

CSSKeywordValue

Beschreibung

Ein neues CSSKeywordValue-Objekt. Seine Eigenschaft value enthält das übergebene Schlüsselwort.

Beispiele

Schlüsselwort erzeugen und auslesen

const keyword = new CSSKeywordValue('auto');
console.log(keyword.value);
console.log(keyword.toString());
console.log(keyword instanceof CSSStyleValue);

auto auto true

Wert per attributeStyleMap setzen

const box = document.querySelector('.box');

// entspricht box.style.display = 'none'
box.attributeStyleMap.set('display', new CSSKeywordValue('none'));

console.log(box.attributeStyleMap.get('display').value);
console.log(box.getAttribute('style'));

none display: none;

Berechneten Wert auf Schlüsselwort prüfen

const el = document.querySelector('main');
const width = el.computedStyleMap().get('margin-left');

if (width instanceof CSSKeywordValue) {
  console.log(`Schlüsselwort: ${width.value}`);
} else {
  console.log(`Numerischer Wert: ${width.value}${width.unit ?? ''}`);
}

Numerischer Wert: 0px

Ungültige Eingabe abfangen

try {
  new CSSKeywordValue('');
} catch (err) {
  console.log(err.name);
}

TypeError

// Wichtig · Fallstricke

Browser-Unterstützung: Chromium-basierte Browser (Chrome, Edge, Opera) unterstützen das Objekt ab Version 66, Safari ab 16.4. Firefox unterstützt das CSS Typed OM bisher nicht. Prüfe deshalb vorher die Verfügbarkeit, z. B. mit if ('CSSKeywordValue' in window), und weiche sonst auf element.style aus.
Der Konstruktor prüft nicht, ob das Schlüsselwort semantisch passt: new CSSKeywordValue('banane') funktioniert. Erst attributeStyleMap.set('display', …) löst bei einem ungültigen Wert einen TypeError aus.
Eine leere Zeichenkette löst sofort einen TypeError aus. Das passiert auch, wenn value nachträglich auf '' gesetzt wird.
Für Zahlen mit Einheiten ist CSSKeywordValue nicht gedacht. Nutze dafür CSSUnitValue oder Hilfsfunktionen wie CSS.px().

Siehe auch

CSSKeywordValue CSSKeywordValue.value CSSStyleValue CSSUnitValue StylePropertyMap.set() Element.computedStyleMap() new CSSPerspective()