CSSMathSum
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die CSSMathSum-Schnittstelle der CSS Typed Object Model-API repräsentiert das Ergebnis, das durch den Aufruf von add(), sub() oder toSum() auf CSSNumericValue erhalten wird.
Ein CSSMathSum ist der Objekttyp, der zurückgegeben wird, wenn die Methode StylePropertyMapReadOnly.get() bei einer CSS-Eigenschaft verwendet 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 übergeordneten Schnittstelle CSSMathValue erben.
Instanz-Methoden
Die Schnittstelle kann auch Methoden von ihrer übergeordneten Schnittstelle CSSMathValue erben.
Beispiele
Wir erstellen ein Element mit einer width, die durch eine calc()-Funktion bestimmt wird, dann verwenden wir console.log(), um den operator und die values anzuzeigen 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. In Zukunft könnten wir die letzten drei Zeilen wie folgt schreiben:
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
Loading…