CSSMathNegate

Konstruktor

CSSMathNegate()

Erstellt ein neues CSSMathNegate-Objekt.

Instanz-Eigenschaften

Erbt auch Eigenschaften von ihrer bergeordneten Schnittstelle, CSSMathValue.

CSSMathNegate.value Schreibgeschtzt

Gibt ein CSSNumericValue-Objekt zurck.

Statische Methoden

Erbt auch Methoden von ihrer bergeordneten Schnittstelle, CSSMathValue.

Instanz-Methoden

Erbt auch Methoden von ihrer bergeordneten Schnittstelle, CSSMathValue.

Beschreibung

CSSMathNegate entspricht der Anwendung des unren Minus auf einen numerischen Wert (x wird zu -x).

In der Regel werden Sie CSSMathNegate nicht direkt konstruieren. Es wird durch den internen Negationsschritt erzeugt, den sub() auf seine Argumente anwendet, bevor sie addiert werden: Das Negieren eines CSSMathSum, CSSMathProduct, CSSMathMin, CSSMathMax, CSSMathClamp oder CSSMathInvert umhllt es in einem CSSMathNegate. Das Negieren eines einfachen CSSUnitValue (einer Lnge, eines Prozentsatzes usw.) kehrt stattdessen direkt das Vorzeichen seines value um, sodass das Subtrahieren einfacher Werte normalerweise kein CSSMathNegate erzeugt.

Ein CSSMathNegate kann auch erscheinen, wenn ein berechneter Wert gelesen wird: Zum Beispiel gibt get() auf einer Eigenschaft, die mit einem calc()-Ausdruck gesetzt wurde, der einen Wert subtrahiert, einen CSSMathSum zurck, dessen Operanden ein CSSMathNegate enthalten knnen. Sie knnen es identifizieren, indem Sie die operator-Eigenschaft auf die Zeichenkette "negate" berprfen.

CSSMathNegate serialisiert sich unter Verwendung der CSS calc()-Syntax als calc(-<value>).

Beispiele

Grundlegende Verwendung

Der folgende Code erstellt ein CSSMathNegate-Objekt aus einer Lnge, und protokolliert dann den Namen des Konstruktors, value und die Serialisierung des Objekts (aus toString()).

const negated = new CSSMathNegate(CSS.px(10));

console.log(negated.constructor.name); // "CSSMathNegate"
console.log(negated.value); // CSSUnitValue {value: 10, unit: "px"}
console.log(negated.toString()); // "calc(-10px)"

Beachten Sie, dass, wenn eine einfache Zahl an arg bergeben wird, value zu einem CSSUnitValue mit der Einheit "number" korrigiert wird:

const negatedNumber = new CSSMathNegate(4);

console.log(negatedNumber.value); // CSSUnitValue {value: 4, unit: "number"}
console.log(negatedNumber.toString()); // "calc(-4)"

Subtrahieren eines zusammengesetzten Wertes

sub() erzeugt ein CSSMathNegate, wenn der subtrahierte Wert selbst ein zusammengesetzter Wert ist, wie z. B. ein CSSMathSum (anstatt eines einfachen CSSUnitValue).

Dies wird durch den folgenden Code demonstriert. Die px und percent knnen ohne Kenntnis der Gre des umgebenden Blocks nicht in einen einzigen Wert kombiniert werden, daher wird der Wert von composite als CSSMathSum dargestellt. Wenn dieser Wert subtrahiert wird, wird der Wert von composite in einem CSSMathNegate umhllt.

const composite = CSS.px(10).add(CSS.percent(5)); // CSSMathSum: calc(10px + 5%)
const result = CSS.px(100).sub(composite);

console.log(result.constructor.name); // "CSSMathSum"
console.log(result.values[1].constructor.name); // "CSSMathNegate"
console.log(result.values[1].value); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
console.log(result.toString()); // "calc(100px - (10px + 5%))"

Parsen von calc()

Ein CSSMathNegate kann auch erstellt werden, wenn CSSStyleValue.parse() verwendet wird, um einen calc()-Ausdruck zu parsen, der nicht zu einem einzelnen Wert aufgelst werden kann.

Zum Beispiel wird im folgenden Code CSSStyleValue.parse() verwendet, um einen Wert fr die width-Eigenschaft zu parsen, der eine Lnge von einem Prozentsatz subtrahiert (die erst beim Layout kombiniert werden knnen). Das Ergebnis ist ein CSSMathSum, bei dem der erste Wert im Array ein CSSUnitValue ist und der zweite Wert ein CSSMathNegate-Objekt, das die Negation des zweiten an die calc()-Funktion bergebenen Operanden darstellt.

const width = CSSStyleValue.parse("width", "calc(50% - 10px)");

console.log(width.constructor.name); // "CSSMathSum"
console.log(width.values[0]); // CSSUnitValue {value: 50, unit: 'percent'}
console.log(width.values[1]); // CSSMathNegate {value: CSSUnitValue, operator: 'negate'}
console.log(width.values[1].value); // CSSUnitValue {value: 10, unit: "px"}

console.log(width.toString()); // "calc(50% - 10px)"

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• sub()
• CSSStyleValue.parse()
• CSSMathInvert
• CSSMathValue.operator