CSSMathMax.values — Eigenschaft · JavaScript-Referenz

Signatur

CSSMathMax.values

Beschreibung

Die Eigenschaft values gehört zur Schnittstelle CSSMathMax aus dem CSS Typed Object Model (CSS Typed OM). Ein CSSMathMax-Objekt steht für die CSS-Funktion max(). Über values kommst du an die einzelnen Argumente. Aus diesen Werten wählt der Browser beim Berechnen des Stils den größten aus.

Du bekommst ein CSSNumericArray zurück. Das ist ein listenähnliches, iterierbares Objekt mit length und Zugriff über den Index (values[0]). Jedes Element ist ein CSSNumericValue. Das kann ein einfacher CSSUnitValue wie 10px sein oder ein verschachtelter Rechenausdruck wie CSSMathSum, CSSMathMin und Ähnliches.

Gebraucht wird values vor allem, wenn du max()-Ausdrücke im Code untersuchen oder umbauen willst. Beispiele sind Werkzeuge für Stil-Analysen, Polyfills, Houdini-Worklets oder das Auslesen von Werten über element.attributeStyleMap bzw. CSSNumericValue.parse(). Die Eigenschaft ist schreibgeschützt. Um die Argumente zu ändern, erzeugst du ein neues CSSMathMax-Objekt.

Rückgabewert

Typ

CSSNumericArray

Beschreibung

Ein unveränderliches, iterierbares CSSNumericArray mit den CSSNumericValue-Objekten, die an max() übergeben wurden. Die Reihenfolge entspricht der ursprünglichen Reihenfolge.

Beispiele

CSSMathMax erzeugen und Argumente auslesen

// entspricht max(100px, 50vw)
const max = new CSSMathMax(CSS.px(100), CSS.vw(50));

console.log(max.operator);       // "max"
console.log(max.values.length);  // Anzahl der Argumente

for (const v of max.values) {
  console.log(v.toString(), v.unit);
}

max 2 100px px 50vw vw

max()-Ausdruck aus einem String parsen und untersuchen

const parsed = CSSNumericValue.parse('max(10px, 5em)');

if (parsed instanceof CSSMathMax) {
  // CSSNumericArray per Spread in ein echtes Array umwandeln
  const units = [...parsed.values].map((v) => v.unit);
  console.log(units);
}

["px", "em"]

Verschachtelte Ausdrücke erkennen

const expr = new CSSMathMax(
  CSS.px(10),
  new CSSMathSum(CSS.em(1), CSS.px(5))
);

const [first, second] = expr.values;
console.log(first instanceof CSSUnitValue);  // true
console.log(second.operator);                // "sum"
console.log(second.values.length);           // 2

true sum 2

Argumente ergänzen – neues Objekt statt Mutation

const el = document.querySelector('.card');
const base = new CSSMathMax(CSS.px(200), CSS.percent(30));

// values ist schreibgeschützt: neuen Ausdruck mit zusätzlichem Argument erzeugen
const extended = new CSSMathMax(...base.values, CSS.rem(12));
el.attributeStyleMap.set('width', extended);

console.log(extended.toString());

max(200px, 30%, 12rem)

// Wichtig · Fallstricke

Browser-Unterstützung: CSS Typed OM gibt es in Chromium-basierten Browsern (Chrome und Edge ab Version 66) und in Safari ab 16.4. Firefox unterstützt CSSMathMax bisher nicht. Prüfe deshalb vorher, ob die Schnittstelle vorhanden ist: if ('CSSMathMax' in window) { … }.
values ist schreibgeschützt, und auch das zurückgegebene CSSNumericArray lässt sich nicht verändern. Zuweisungen wie max.values[0] = CSS.px(5) haben keine Wirkung.
CSSNumericArray ist kein echtes Array. Methoden wie map() oder filter() fehlen. Wandle es vorher mit [...values] oder Array.from(values) um.
Die Elemente können selbst Rechenausdrücke sein, z. B. CSSMathSum oder CSSMathMin. Wenn du die Argumente rekursiv verarbeitest, prüfe den Typ mit instanceof oder über operator.
Die Argumente müssen zueinander passende Typen haben (z. B. nur Längen). Gemischte Typen wie CSS.px(1) zusammen mit CSS.s(1) führen schon im Konstruktor zu einem TypeError.
values enthält die angegebenen Argumente, nicht das Ergebnis. Den tatsächlich berechneten Wert bekommst du über element.computedStyleMap().

Siehe auch

CSSMathMin.values CSSMathSum.values CSSMathClamp.value CSSMathNegate.value CSSMathInvert.value