new CSSMathMax() — Methode · JavaScript-Referenz

Signatur

new CSSMathMax(...values)

Beschreibung

Der Konstruktor CSSMathMax() gehört zum CSS Typed Object Model (Typed OM). Er erzeugt ein Objekt, das der CSS-Funktion max() entspricht. Bei der Auswertung verwendet der Browser den größten der angegebenen Werte, zum Beispiel max(50%, 300px).

Gegenüber Zeichenketten wie element.style.width = "max(50%, 300px)" hat der Weg über Typed OM Vorteile: Die Werte sind echte Objekte (CSSUnitValue, CSSMathSum usw.). Man kann sie ohne String-Parsing lesen, ändern und verschachteln, und Typfehler fallen schon beim Erzeugen auf.

Als Argumente sind Zahlen oder CSSNumericValue-Objekte erlaubt, etwa aus CSS.px(), CSS.percent() oder CSS.vw(). Alle Werte müssen kompatible Typen haben: Längen und Prozente lassen sich mischen, Längen und Winkel nicht. Das erzeugte Objekt übergibt man meist an element.attributeStyleMap.set().

Parameter

Name	Typ	Default	Beschreibung
$...values Pflicht	number \| CSSNumericValue		Ein oder mehrere numerische Werte, unter denen der größte gewählt wird. Eine einfache Zahl wird wie `CSS.number(n)` behandelt. Es muss mindestens ein Wert angegeben werden.

Rückgabewert

Typ

CSSMathMax

Beschreibung

Ein neues CSSMathMax-Objekt. Seine Eigenschaft operator hat den Wert "max", und values ist ein CSSNumericArray mit den übergebenen Werten.

Beispiele

max()-Wert erzeugen und untersuchen

const maxWert = new CSSMathMax(CSS.px(10), CSS.vw(5));

console.log(maxWert.toString());
console.log(maxWert.operator);
console.log(maxWert.values.length);

max(10px, 5vw) max 2

Responsive Breite per attributeStyleMap setzen

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

// Breite: mindestens 300px, sonst 50 % des Elternelements
karte.attributeStyleMap.set(
  'width',
  new CSSMathMax(CSS.percent(50), CSS.px(300))
);

const breite = karte.attributeStyleMap.get('width');
console.log(breite instanceof CSSMathMax, breite.toString());

true max(50%, 300px)

Verschachtelung mit CSSMathSum

// entspricht max(1rem, calc(2vw + 4px))
const schrift = new CSSMathMax(
  CSS.rem(1),
  new CSSMathSum(CSS.vw(2), CSS.px(4))
);

document.body.attributeStyleMap.set('font-size', schrift);
console.log(schrift.toString());

max(1rem, calc(2vw + 4px))

Fehler bei unverträglichen Typen abfangen

try {
  new CSSMathMax(CSS.px(10), CSS.deg(45));
} catch (err) {
  console.log(err.name);
}

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

TypeError SyntaxError

// Wichtig · Fallstricke

Ausnahmen: Ohne Argumente wirft der Konstruktor einen SyntaxError. Bei unverträglichen Typen, etwa px und deg oder eine reine Zahl neben einer Länge, wirft er einen TypeError.
Keine sofortige Auswertung: Das Objekt enthält den Ausdruck, nicht das Ergebnis. Welcher Wert größer ist, entscheidet der Browser erst beim Layout, weil Einheiten wie % oder vw vom Kontext abhängen. Den berechneten Wert liefert element.computedStyleMap().get(...).
Browser-Kompatibilität: Typed OM wird in Chromium-Browsern (Chrome, Edge, Opera) seit Version 66 unterstützt, in Safari erst seit 16.4. Firefox unterstützt es nicht. Vor der Nutzung prüfen, etwa mit if ('CSSMathMax' in window), und sonst auf Zeichenketten über element.style zurückgreifen.
Das Gegenstück für den kleinsten Wert ist CSSMathMin. Für clamp() gibt es CSSMathClamp, das aber kaum unterstützt wird.

Siehe auch

new CSSMathMin() new CSSMathSum() new CSSMathClamp() new CSSMathNegate() new CSSMathInvert()