CSSMathNegate

Konstruktor

CSSMathNegate()

Erstellt ein neues CSSMathNegate-Objekt.

Instanzeigenschaften

Erbt außerdem Eigenschaften von seinem übergeordneten Interface CSSMathValue.

CSSMathNegate.value Schreibgeschützt

Gibt ein CSSNumericValue-Objekt zurück.

Statische Methoden

Erbt außerdem Methoden von seinem übergeordneten Interface CSSMathValue.

Instanzmethoden

Erbt außerdem Methoden von seinem übergeordneten Interface CSSMathValue.

Beschreibung

CSSMathNegate entspricht der Anwendung des unären Minusoperators auf einen numerischen Wert (x wird zu -x).

In der Regel erstellen Sie ein CSSMathNegate nicht direkt. Es entsteht durch den internen Negationsschritt, den sub() auf seine Argumente anwendet, bevor diese addiert werden: Wird ein CSSMathSum, CSSMathProduct, CSSMathMin, CSSMathMax, CSSMathClamp oder CSSMathInvert negiert, wird es in ein CSSMathNegate eingeschlossen. Bei der Negation eines einfachen CSSUnitValue (etwa einer Länge oder eines Prozentwerts) wird dagegen direkt das Vorzeichen seiner value geändert. Daher entsteht beim Subtrahieren einfacher Werte normalerweise kein CSSMathNegate.

Ein CSSMathNegate kann auch beim Lesen eines berechneten Werts auftreten: Beispielsweise kann get() für eine Eigenschaft, die mit einem calc()-Ausdruck gesetzt wurde, der einen Wert subtrahiert, ein CSSMathSum zurückgeben, dessen Operanden ein CSSMathNegate enthalten. Sie können es erkennen, indem Sie prüfen, ob die Eigenschaft operator den String "negate" enthält.

CSSMathNegate wird mit der CSS-Syntax von calc() als calc(-<value>) serialisiert.

Beispiele

Grundlegende Verwendung

Der folgende Code erstellt aus einer Länge ein CSSMathNegate-Objekt und gibt anschließend den Namen des Konstruktors, value und die Serialisierung des Objekts (über toString()) aus.

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 eine einfache Zahl, die an arg übergeben wird, in ein CSSUnitValue mit der Einheit "number" umgewandelt wird:

const negatedNumber = new CSSMathNegate(4);

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

Subtrahieren eines zusammengesetzten Werts

sub() erzeugt ein CSSMathNegate, wenn der subtrahierte Wert selbst ein zusammengesetzter Wert ist, beispielsweise ein CSSMathSum statt eines einfachen CSSUnitValue.

Der folgende Code veranschaulicht dies. px und percent können ohne Kenntnis der Größe des umschließenden Blocks nicht zu einem einzigen Wert kombiniert werden. Deshalb wird der Wert von composite als CSSMathSum dargestellt. Wenn dieser Wert subtrahiert wird, wird der Wert von composite in ein CSSMathNegate eingeschlossen.

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 entstehen, wenn CSSStyleValue.parse() einen calc()-Ausdruck parst, der sich nicht zu einem einzelnen Wert auflösen lässt.

Im folgenden Code parst CSSStyleValue.parse() beispielsweise einen Wert für die Eigenschaft width, bei dem eine Länge von einem Prozentwert subtrahiert wird. Diese Werte können erst beim Layout kombiniert werden. Das Ergebnis ist ein CSSMathSum, dessen erster Wert im Array ein CSSUnitValue ist. Der zweite Wert ist ein CSSMathNegate-Objekt, das die Negation des zweiten an die Funktion calc() ü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-Kompatibilität

Siehe auch

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