CSSMathSum
Die CSSMathSum
-Schnittstelle der CSS Typed Object Model API repräsentiert das Ergebnis, das durch Aufrufen von add()
, sub()
oder toSum()
auf CSSNumericValue
erhalten wird.
Ein CSSMathSum ist der Objekttyp, der zurückgegeben wird, wenn die Methode StylePropertyMapReadOnly.get()
auf eine CSS-Eigenschaft angewendet wird, deren Wert mit einer calc()
-Funktion erstellt wurde.
Konstruktor
CSSMathSum()
Experimentell-
Erstellt ein neues
CSSMathSum
-Objekt.
Instanz-Eigenschaften
CSSMathSum.values
-
Gibt ein
CSSNumericArray
-Objekt zurück, das ein oder mehrereCSSNumericValue
-Objekte enthält.
Statische Methoden
Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle CSSMathValue
erben.
Instanz-Methoden
Die Schnittstelle kann auch Methoden von ihrer Elternschnittstelle CSSMathValue
erben.
Beispiele
Wir erstellen ein Element mit einer width
, die mit einer calc()
-Funktion bestimmt wird, und nutzen console.log()
, um den operator
und die values
auszugeben, und untersuchen die Werte etwas genauer.
<div>has width</div>
Wir weisen eine width
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); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(styleMap.get("width").values[0]); // CSSUnitValue {value: 30, unit: "percent"}
console.log(styleMap.get("width").values[0].value); // 30
console.log(styleMap.get("width").values[0].unit); // 'percent'
console.log(styleMap.get("width").values[1]); // CSSUnitValue {value: -20, unit: "px"}
console.log(styleMap.get("width").values[1].value); // -20
console.log(styleMap.get("width").values[1].unit); // 'px'
Die Spezifikation entwickelt sich noch weiter. In Zukunft könnten die letzten drei Zeilen wie folgt geschrieben werden:
console.log(styleMap.get("width").values[1]); // CSSMathNegate {value: CSSUnitValue, operator: "negate"}
console.log(styleMap.get("width").values[1].value); // CSSUnitValue {value: 20, unit: "px"}
console.log(styleMap.get("width").values[1].value.unit); // 'px'
Spezifikationen
Specification |
---|
CSS Typed OM Level 1 # cssmathsum |
Browser-Kompatibilität
BCD tables only load in the browser