CSSNumericValue: max()-Methode

Syntax

max()
max(number1)
max(number1, number2)
max(number1, number2, /* …, */ numberN)

Parameter

number1, …, numberN Optional

Entweder eine Zahl oder ein CSSNumericValue. Eine Zahl wird in einen CSSUnitValue mit der Einheit "number" umgewandelt. Daher wird 2 wie CSS.number(2) behandelt.

Rückgabewert

Ein CSSUnitValue, wenn der CSSNumericValue und alle übergebenen Werte dieselbe Einheit haben. Andernfalls ein CSSMathMax.

Ausnahmen

TypeError

Wird ausgelöst, wenn die Werte inkompatible Typen haben, beispielsweise eine Länge und eine Zeit.

Beschreibung

Wenn der CSSNumericValue und alle übergebenen Werte genau dieselbe Einheit haben, vergleicht die Methode sie und gibt den größten Wert als einzelnen CSSUnitValue zurück. Beispielsweise gibt CSS.px(10).max(CSS.px(25)) den Wert 25px zurück.

Andernfalls gibt die Methode einen CSSMathMax zurück, der eine CSS-Funktion max() darstellt und jeden Wert als separaten Term beibehält. Der Browser ermittelt erst bei der Verwendung des Werts, welcher Term der größte ist. Ob beispielsweise 100px oder 50% größer ist, hängt von der Größe des umgebenden Elements ab. Einheiten werden nicht umgerechnet. Deshalb ergibt auch der Vergleich einer Länge in cm mit einer Länge in in einen CSSMathMax, obwohl beide feste Längen sind.

Wenn der CSSNumericValue bereits ein CSSMathMax ist, werden die übergebenen Werte als zusätzliche Terme hinzugefügt. Der vorhandene CSSMathMax wird also nicht zu einem Term innerhalb eines neuen CSSMathMax. Die Terme des Ergebnisses sind in folgender Reihenfolge angeordnet: zuerst der CSSNumericValue (oder, falls er bereits ein CSSMathMax ist, dessen Terme), dann die übergebenen Werte in der Reihenfolge ihrer Übergabe.

Die Werte müssen vergleichbare Typen haben, beispielsweise zwei Längen oder eine Länge und einen Prozentwert. Der Vergleich einer Länge mit einer Zeit oder einer einfachen Zahl löst einen TypeError aus.

Beispiele

Den größten Wert bei gleicher Einheit ermitteln

Wenn alle Werte dieselbe Einheit haben, ist das Ergebnis ein einzelner CSSUnitValue:

const largest = CSS.px(10).max(CSS.px(25), CSS.px(5));
console.log(largest.toString()); // "25px"

Werte mit unterschiedlichen Einheiten vergleichen

Wenn sich die Einheiten unterscheiden, ist das Ergebnis ein CSSMathMax – selbst wenn die Werte in dieselbe Einheit umgerechnet werden könnten:

const atLeast = CSS.px(100).max(CSS.percent(50));
console.log(atLeast.toString()); // "max(100px, 50%)"

const lengths = CSS.cm(1).max(CSS.in(0.393701));
console.log(lengths.toString()); // "max(1cm, 0.393701in)"

Nicht vergleichbare Werte vergleichen

Der Vergleich einer Länge mit einer Zeit löst einen TypeError aus:

try {
  CSS.px(1).max(CSS.s(1));
} catch (e) {
  console.log(e instanceof TypeError); // true
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSSNumericValue.min()
• CSSMathMax
• CSS-Funktion max()
• CSS Typed OM verwenden