Schnittstellen basierend auf CSSMathValue

Im Folgenden finden Sie eine Liste von Schnittstellen, die auf der CSSMathValue-Schnittstelle basieren.

• CSSMathInvert
• CSSMathMax
• CSSMathMin
• CSSMathNegate
• CSSMathProduct
• CSSMathSum

Instanz-Eigenschaften

CSSMathValue.operator

Gibt den Operator an, den der aktuelle Subtyp darstellt.

Statische Methoden

Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle, CSSNumericValue, erben.

Instanzmethoden

Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle, CSSNumericValue, erben.

Beispiele

Wir erstellen ein Element mit einer width, die mithilfe einer calc()-Funktion bestimmt wird, und verwenden dann console.log(), um den operator auszugeben.

Wir weisen eine width mit einer Berechnung zu

div {
  width: calc(30% - 20px);
}

Wir fügen das JavaScript hinzu

const styleMap = document.querySelector("div").computedStyleMap();

console.log(styleMap.get("width")); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
console.log(styleMap.get("width").operator); // 'sum'
console.log(styleMap.get("width").values[1].value); // -20

Der CSSMathValue.operator gibt "sum" zurück, weil styleMap.get("width").values[1].value ); -20 ist: Addition einer negativen Zahl.

Spezifikationen

Browser-Kompatibilität