CSSMathMin.values — Eigenschaft · JavaScript-Referenz

Signatur

CSSMathMin.values

Beschreibung

Die Eigenschaft values gehört zur Schnittstelle CSSMathMin aus dem CSS Typed Object Model. Ein CSSMathMin-Objekt steht für die CSS-Funktion min(), zum Beispiel min(10px, 50vw). Über values kommst du an die einzelnen Argumente dieser Funktion. Sie liegen als typisierte Objekte vor, also nicht als Zeichenkette.

Zurückgegeben wird ein CSSNumericArray. Das ist eine schreibgeschützte, iterierbare Liste. Sie hat eine length-Eigenschaft und erlaubt Indexzugriff wie values[0]. Jeder Eintrag ist ein CSSNumericValue. Das kann ein einfacher CSSUnitValue (etwa 10px) sein oder ein verschachtelter Rechenausdruck wie CSSMathSum für calc(100% - 2rem).

Typische Einsatzfälle sind Werkzeuge, die Stilwerte untersuchen oder umschreiben: Debugger, Design-Token-Werkzeuge, Animationsbibliotheken oder Code, der responsive Größenangaben auswertet. Die Eigenschaft ist selbst schreibgeschützt. Wenn du andere Werte brauchst, legst du mit new CSSMathMin(...) ein neues Objekt an.

Rückgabewert

Typ

CSSNumericArray

Beschreibung

Eine schreibgeschützte, iterierbare Liste von CSSNumericValue-Objekten, eins für jedes Argument von min(), in der ursprünglichen Reihenfolge.

Beispiele

CSSMathMin erzeugen und Argumente auslesen

// entspricht min(10px, 50vw)
const minWert = new CSSMathMin(CSS.px(10), CSS.vw(50));

console.log(minWert.toString());
console.log(minWert.values.length);

for (const wert of minWert.values) {
  console.log(wert.value, wert.unit);
}

min(10px, 50vw) 2 10 "px" 50 "vw"

min()-Ausdruck aus einem String parsen

const ausdruck = CSSNumericValue.parse('min(100%, 40rem, 800px)');

console.log(ausdruck instanceof CSSMathMin);

// CSSNumericArray in ein echtes Array umwandeln
const argumente = Array.from(ausdruck.values, (v) => v.toString());
console.log(argumente);

true ["100%", "40rem", "800px"]

Inline-Stil eines Elements untersuchen (auch verschachtelt)

const box = document.createElement('div');
box.style.width = 'min(calc(100% - 2rem), 60ch)';

const breite = box.attributeStyleMap.get('width');

if (breite instanceof CSSMathMin) {
  breite.values.forEach((wert, index) => {
    // Verschachtelte Ausdrücke sind eigene CSSMathValue-Typen
    console.log(index, wert.constructor.name, wert.toString());
  });
}

0 "CSSMathSum" "calc(100% - 2rem)" 1 "CSSUnitValue" "60ch"

// Wichtig · Fallstricke

Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern (Chrome/Edge ab 66) und in Safari ab 16.4. Firefox unterstützt es derzeit nicht. Prüfe vorher, ob es verfügbar ist, z. B. mit 'CSSMathMin' in window.
Schreibgeschützt: values lässt sich nicht neu zuweisen, und CSSNumericArray hat keine Methoden wie push(). Um Werte zu ändern, erzeugst du ein neues CSSMathMin und setzt es z. B. mit attributeStyleMap.set().
Kein echtes Array: map(), filter() usw. gibt es nicht. Nutze for...of, forEach() oder Array.from().
Werte mit gleicher Einheit werden zusammengefasst: CSS.px(10).min(CSS.px(20)) ergibt direkt CSSUnitValue 10px und kein CSSMathMin. Prüfe den Typ daher vorher mit instanceof CSSMathMin.
Berechnete Stile: Über computedStyleMap() ist min() oft schon zu einem absoluten Wert aufgelöst. Den ursprünglichen Ausdruck bekommst du zuverlässig über attributeStyleMap bzw. CSS-Regeln (styleMap).

Siehe auch

CSSMathMin CSSMathMax.values CSSNumericArray CSSNumericValue CSSNumericValue.prototype.min() CSSMathSum.values CSSMathClamp.lower